AJAX 请求不起作用答案

【问题标题】：AJAX request not workingAJAX 请求不起作用
【发布时间】：2011-06-04 22:56:20
【问题描述】：

所以我在纯 PHP 上运行良好。当您点击提交时，表单已提交并且 PHP 页面已加载。所以我尝试实现 AJAX，以便在提交表单时不必重新加载页面，但现在变量永远不会到达 PHP 脚本。

这是我得到的：

<form method="get" action="sms.php">
<input type="text" name="number" value="Phone number" /><br />
<textarea type="text" name="message" rows="5" cols="20"></textarea><br />
<input type="button" onclick="ajaxFunction()" value="Send" />
</form>

AJAX js 文件：

   function ajaxFunction(){
    var ajaxRequest;

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('confirm');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var number = document.getElementById('number').value;
    var message = document.getElementById('message').value;
    var queryString = "?number=" + number + "&message=" + message;
    ajaxRequest.open("GET", "sms.php" + queryString, true);
    ajaxRequest.send(null); 
}

最后是 php 脚本：

<?php
$number = $_GET["number"];
$message = $_GET["message"];

$client = new SoapClient('http://sms2.cdyne.com/sms.svc?wsdl');
$param = array(
    'PhoneNumber' => $number,
    'LicenseKey' => 'xxxxxxxxxxxxxxxxxxxxxxxx',
    'Message' => $message,
    );

echo "SMS sent.";
?>

【问题讨论】：

你应该完全放弃它并使用 jQuery。
如果您可以使用jQuery's AJAX 方法，它会让您的生活更轻松
@Fosco 和@8bitme 告诉某人使用 jQuery 不是答案。
@james 这就是它出现在评论区的原因，而我的回答甚至没有提到它（不过，我还打算添加一个完整的 jQuery 解决方案。）
@Fosco 不确定您是否会给出真正的答案，但既然您这样做了，我就更正了。另外+1你应该使用jQuery。

标签： php javascript ajax

【解决方案1】：

您正在使用 getElementById() 来获取元素：

var number = document.getElementById('number').value;
var message = document.getElementById('message').value;

但是您的 HTML 元素没有 ID。像这样更新它们：

<input type="text" ID="number" value="Phone number" /><br />
<textarea type="text" ID="message" rows="5" cols="20"></textarea><br />

或更改您的 javascript 以使用 getElementByName()。

但是，如果添加 jQuery 是一个选项，它可能就是这么简单：

<input type="text" id="number" value="Phone number" /><br />
<textarea type="text" id="message" rows="5" cols="20"></textarea><br />
<input type="button" id="submitform" value="Send" />

<script>
$(document).ready(function() {
  $('#submitform').click(function() {
     var num = $('#number').value();
     var msg = $('#message').value();
     $.get('sms.php',{number: num, message: msg}, function(response) { alert(response); });
  });
});
</script>

那个巨大的 ajaxFunction() 将被使用 jQuery 的大约 8 行 JS 所取代。

【讨论】：

【解决方案2】：

打开firebug，开启persist。单击按钮并检查传出请求。确保您正在发送数据。此外，在您的 php 脚本中转储 $_REQUEST。在 firebug 中检查。

【讨论】：