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