没有 JQuery 的 AJAX POST 到 PHP答案

【问题标题】：AJAX POST to PHP without JQuery没有 JQuery 的 AJAX POST 到 PHP
【发布时间】：2016-05-26 21:54:21
【问题描述】：

我有一个 PHP 作业，我决定尝试添加 AJAX，因为在我们的课程中，我们不会只学习 PHP 的 AJAX。我似乎无法得到工作的回应。但是，在 Fire Fox 上我的控制台的网络部分中，我可以找到带有我在表单中输入的值的 POST 发送，以及由于 php 函数工作而导致的 PHP 回显。但是，它不会出现在我的 div 标签中。非常欢迎任何帮助，谢谢。

这里是 HTML 和 JavaScript：

<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        function testPass() {
            var username = document.getElementById("uname").value;
            var passwrd = document.getElementById("passwd").value;
            var creds = "uname="+username+"&passwd="+passwrd;
            var ajx = new XMLHttpRequest();
            ajx.onreadystatechagne = function () {
                if (ajx.readyState == 4 && ajx.status == 200) {
                    document.getElementById("message").innerHTML = ajx.responseText;
                }
            };
            ajx.open("POST", "authenticate.php", true);
            ajx.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            ajx.send(creds);
            //document.getElementById("message").innerHTML = creds;
        }
    </script>
</head>
<body>
    <p>
        <form id="login">
            <strong>Login</strong><br/><br/>
            Username :<br/><input type="text" id="uname"><br/>
            Password :<br/><input type="text" id="passwd"><br/><br/>
            <div id="message" style="color:red;"></div>
            <br/><button type="button" value="Submit" onclick="testPass();">Sign In</button>
        </form>
    </p>
</body>
</html>

这里是 PHP：

<?php
$uname = $_POST['uname'];
$passwd = $_POST['passwd'];

if (empty($uname) && empty($passwd)) {
    echo "The username and password are required!";
} else if (empty($uname)) {
    echo "The username is required!";
} else if (empty($passwd)) {
    echo "The password is required!";
} else {
    echo "It works!";
} ?>

【问题讨论】：

可以看到请求，但是没有响应？
请使用 PHP 的built-in functions 来处理密码安全问题。如果您使用的 PHP 版本低于 5.5，则可以使用 password_hash() compatibility pack。

标签： javascript php ajax

【解决方案1】：

你有一个错字：ajx.onreadystatechagne 应该是 ajx.onreadystatechange

【讨论】：

与其只是指出拼写错误，不如解释一下他将来如何解决这类问题。
公平点，但除了校对代码之外，很难说，因为 JavaScript 在为错误的键赋值时不会输出错误。

【解决方案2】：

我想你已经解决了但这是解决方案 ajx.onreadystatechagne

应该是

ajx.onreadystatechange

【讨论】：

【解决方案3】：

尝试尽可能多地使用函数，以使代码可重用且更易于排除故障。我建议使用以下代码。

<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">

        function createAjaxRequestObject() {
            var xmlhttp;

            if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else { // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            // Create the object
            return xmlhttp;
        }

        function AjaxPost(ajaxURL, parameters, onComplete) {
            var http3 = createAjaxRequestObject();

            http3.onreadystatechange = function() {
                if(http3.readyState == 4) {
                    if(http3.status == 200) {
                        if(onComplete) {
                            onComplete(http3.responseText);
                        }
                    }
                }
            };

            // Create parameter string
            var parameterString = "";
            var isFirst = true;
            for(var index in parameters) {
                if(!isFirst) {
                    parameterString += "&";
                } 
                parameterString += encodeURIComponent(index) + "=" + encodeURIComponent(parameters[index]);
                isFirst = false;
            }

            // Make request
            http3.open("POST", ajaxURL, true);
            http3.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            http3.send(parameterString);
        }

        function completedAJAX(response) {
            alert(response);
        }

        function testPass() {
            var parameters = {
              "uname" : document.getElementById("uname").value,
              "passwd" : document.getElementById("passwd").value
            };

            AjaxPost("authenticate.php", parameters, completedAJAX);
        }
    </script>
</head>
<body>
    <p>
        <form id="login">
            <strong>Login</strong><br/><br/>
            Username :<br/><input type="text" name="uname" id="uname" /><br/>
            Password :<br/><input type="password" name="passwd" id="passwd" /><br/><br/>
            <div id="message" style="color:red;"></div>
            <br/><button type="button" value="Submit" onclick="testPass();">Sign In</button>
        </form>
    </p>
</body>
</html>

如果您在测试某些脚本时使用 Firefox 或 Chrome 中的开发人员工具（按 CTRL + SHIFT + J），另一个提示是使用 Firebug。此错误会在控制台中弹出，您会立即注意到该错误。

【讨论】：