没有JQuery的AJAX POST到PHP

时间:2016-02-15 20:41:07

标签: javascript php ajax

我有一个PHP作业,我决定尝试添加AJAX,因为在我们的课程中我们不会只学习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!";
} ?>

3 个答案:

答案 0 :(得分:2)

尝试尽可能使用函数以使代码可重用且更容易进行故障排除。我建议使用以下代码。

 ref.observeSingleEventOfType(.Value, withBlock: { snapshot in
        print(snapshot.value.objectForKey("Table")!)
        s = snapshot.value.objectForKey("items:")! as! String

        Str = s.componentsSeparatedByString(",")


    })

    for(var i = 0 ; i < Str.count ; i++){
        print(Str[i])
    }

如果您在测试某些脚本时使用Firefox或Chrome中的开发人员工具(按CTRL + SHIFT + J),则另一个提示是使用Firebug。这个错误会在控制台中弹出,你会立即发现错误。

答案 1 :(得分:1)

你有一个拼写错误:ajx.onreadystatechagne应该是ajx.onreadystatechange

答案 2 :(得分:1)

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

应该是

ajx.onreadystatechange