PHP的AJAX请求

Question

我是第一次从事Ajax的开发，我觉得自己即将解决此问题，但我需要一些帮助。 我的网页文件首先位于下面，该文件具有电子邮件地址的输入字段。 用户提交时，应调用ajax doWork（）函数，该函数创建请求并处理请求。 我已经修复了创建请求的最初问题，因此我确信已经基于浏览器创建了正确的对象。 我的问题是没有回复文本被提交回，也没有创建电子邮件。 目标是让用户输入电子邮件，然后将一封介绍性电子邮件发送回该地址，如果成功，则应返回一个响应字符串，以使用户知道他们已成功添加到邮件列表和提交中工作了。 感谢您的帮助，我们将不胜感激。

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

<script type="text/javascript" charset="utf-8" src="ajax.js"></script>

<div class="involve">
<h1>How to Get Involved In OEC</h1>
<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><br></br>
<form method="get">
    Email: <input type="email" name="email" id="email" required><br></br>
    <input type="submit" value="Send" onclick="doWork()">
</form>
</div>

<div id="outputResponse">
</div>


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

因此，这是创建请求并输出从email.php文件接收的数据的ajax.js文件

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请求并回显是否成功。

<?php
if (isset($_GET['email'])) {
    $mail = trim($_GET['email']);
    $subject = 'Welcome!';
    $message = 'Thank you for joining the Operation:Educate Children email list.  In the future, we will send you updates about new opportunities to become more involved in the activities that we run here at OEC and you could make a difference on children\'s futures. Thank you and best wishes!';
    mail($mail, $subject, $message);
    echo 'Success! Thank you for your interest in Operaton:Educate Children. Stay tuned for updates!';
}
?>

Answer 1

首先添加return false; 在函数doWork的末尾，将onclick="doWork()"更改为onclick="return doWork()"

然后也更改下面的行

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

至

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

也阅读此问题:) 使用JavaScript设置innerHTML与设置值

Answer 2

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);
    }
});