使用 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');?>

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

<?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;

也阅读这个问题 :) Setting innerHTML vs. setting value with Javascript

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