为什么这个简单的 JavaScript+Ajax+php 代码不起作用？答案

【问题标题】：Why does this simple JavaScript+Ajax+php code not working?为什么这个简单的 JavaScript+Ajax+php 代码不起作用？
【发布时间】：2017-04-12 16:37:04
【问题描述】：

我是 ajax 新手，我正在尝试将 html 页面数据发送到 php 而不重新加载当前页面。当我点击提交按钮时，它只会闪烁“处理中...”

html 文件

<!DOCTYPE html>
<head>
<script type="text/javascript">
function ajax_post(){
    var hr = new XMLHttpRequest();
    var url = "simple.php";
    var fn = document.getElementById("first_name").value;
    var ln = document.getElementById("last_name").value;
    var vars = "firstname="+fn+"&lastname="+ln;
    hr.open("POST", url, true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var return_data = hr.responseText;
            document.getElementById("status").innerHTML = return_data;
        }
    }
    hr.send(vars);
    document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>
First Name: <input id="first_name" name="first_name" type="text">  <br><br>
Last Name: <input id="last_name" name="last_name" type="text"> <br><br>
<input name="myBtn" type="submit" value="Submit Data" onclick="ajax_post();"> <br><br>
<div id="status"></div>
</body>
</html>`

PHP 文件

<?php 
echo 'Thank you '. $_POST['firstname'] . ' ' . $_POST['lastname'] . ', says the PHP file';
?>

编辑 1

我在 onreadystatechange 中添加了警报消息。它分别显示三个警报消息 2,3,4。

alert(hr.readyState);

【问题讨论】：

“不工作”是什么意思？控制台错误？ PHP 错误信息？ - 你还有一个</script> 在<head> 之后浮动
在onreadystatechange 函数（if 上方）中尝试alert()/console.debug() hr.readyState 和hr.status，看看输出是什么。
</script> 我可以在头部看到这个结束的第一个元素。
嗨@lvar，我在 onreadystatechange 中添加了警报消息 {alert(hr.readyState);}。它分别显示三个警报消息 2,3,4。
@Sparta 好的，但我认为hr.status 有更重要的信息。尝试输出它。

标签： javascript php ajax

【解决方案1】：

我可以看到很多东西：

</script> 脚本的结束，头部没有任何开始标记。
变量vars 没有创建查询字符串，因为它缺少?。

因此，完整的更改将是：

<head>
    <script type="text/javascript">
    function ajax_post(){
        var hr = new XMLHttpRequest();
        var url = "simple.php";
        var fn = document.getElementById("first_name").value;
        var ln = document.getElementById("last_name").value;
        var vars = "?firstname="+fn+"&lastname="+ln;
        //----------^---put this at start.
        hr.open("POST", url, true);
        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        hr.onreadystatechange = function() {
            if(hr.readyState == 4 && hr.status == 200) {
                var return_data = hr.responseText;
                document.getElementById("status").innerHTML = return_data;
            }
        }
        hr.send(vars);
        document.getElementById("status").innerHTML = "processing...";
    }
    </script>
</head>

或者您可以将其发送为：

hr.send({ firstname:fn, lastname:ln });

【讨论】：

但是它有一个开始标签？！在<head> 之后我错了吗？
@Sparta 你是如何测试这个 ajax 的。在您的本地服务器或文件系统上。
@Jai 文件系统
@Sparta 什么！！！没门。 Ajax 只能在本地或其他服务器上的网络服务器上使用。
@Sparta 你也应该说 PHP 也只能在网络服务器上工作：D