Запрос AJAX с PHP

Я работаю над ajax в первый раз, и мне кажется, что я близок к решению этой проблемы, но мне нужна помощь. Сначала у меня есть файл моей веб-страницы, в котором есть поле ввода для адреса электронной почты. Когда пользователь отправляет, должна быть вызвана функция ajax doWork(), которая создает запрос и обрабатывает запрос. Я исправил начальную проблему создаваемого запроса, поэтому я уверен, что правильный объект создан на основе браузера. Моя проблема заключается в том, что текст ответа не отправляется обратно и не создается электронное письмо. Цель состоит в том, чтобы пользователь вводил адрес электронной почты, а затем вводное электронное письмо, отправленное обратно на этот адрес, когда это было успешным, должна быть отправлена строка ответа, позволяющая пользователю узнать, что они были успешно добавлены в список рассылки и представление работал. Спасибо за любую помощь, мы очень благодарны.

<!--?php include('../includes/educateHeader.php');?-->



<div>
<h2>How to Get Involved In OEC</h2>
<span>Want to become more involved in Operation:Educate Children and don't know how? Share your email address with us, like our facebook page, or check out blog out to learn more about how you can join and help children obtain the education they deserve</span><form method="get">
 Email: 
</form>
</div>




<!--?php include('../includes/educateFooter.php');?-->

Итак, вот файл ajax.js, который создает запрос и распечатывает данные, полученные из файла email.php

function getHTTPObject() {
 if (window.ActiveXObject) {
 return new ActiveXObject("Microsoft.XMLHTTP");
 }
 else if (window.XMLHttpRequest) {
 return new XMLHttpRequest();
 }
 else {
 alert("Your browser does not support AJAX.");
 return null;
 }
}

function setOutput() {
 if (httpObject.readyState == 4 && httpObject.status == 200) {
 document.getElementById('outputResponse').value = httpObject.responseText;
 }
}

function doWork() {
 httpObject = getHTTPObject();
 if (httpObject != null) {
 httpObject.open("GET", "email.php?email=" + document.getElementById('email').value, true);
 httpObject.send(null);
 httpObject.onreadystatechange = setOutput;
 }
}

var httpObject = null;

Наконец, здесь приведен скрипт email.php, который должен принять запрос ajax и отследить, произошел ли успех или нет.

2 ответа

Сначала добавьте return false; в конце вашей функции doWork и измените onclick="doWork()" на onclick="return doWork()"

Затем также измените строку ниже

document.getElementById('outputResponse').value = httpObject.responseText;

в

document.getElementById('outputResponse').innerHTML = httpObject.responseText;

Прочитайте этот вопрос тоже :) Настройка innerHTML против значения установки с помощью Javascript


JQuery делает это очень просто:

$.ajax({
 url:'email.php',
 type: "POST",
 data: 'email='+$('input[name=email]').val(),
 success:function(html) {
 $('#mydiv').html(html);
 }
});

Или для GET, еще проще:

$.ajax({
 url:'email.php?email='+$('input[name=email]').val(),
 success:function(html) {
 $('#mydiv').html(html);
 }
});

licensed under cc by-sa 3.0 with attribution.