0

我是第一次使用 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!';
}
?>
4

2 回答 2

1

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

然后也改变下面的行 

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

至

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

也阅读这个问题 :)使用 Javascript 设置 innerHTML 与设置值

于 2013-08-23T21:56:01.897 回答
0

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);
    }
});
于 2013-08-23T21:59:49.203 回答