$.ajax提交表单，有时成功，有时出错

Question

我有一个简单的登录表单，通过$.ajax函数传递给php。问题是，在本地主机上，$.ajax函数的结果有时成功，有时出错。大多数时候，当我获得成功是当我使用铬调试器。当我在服务器上检查文件时，我只得到了$.ajax的错误结果。

提前谢谢..。

表单代码：

<form method="post" action="">
        <h3>Login</h3>
        <label>User Name:<input type="text" name="uname" id="uname"></label>
        <br>
        <label>Password:<input type="password" name="pass" id="pass"></label>
        <br>
        <button type="submit" id="submit">login</button>
    </form>

$.ajax代码

  $("#submit").click(function(){
                $.ajax({
                    cache: false,
                    url: 'php/login.php',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        uname: $('#uname').val(),
                        pass: $('#pass').val()
                    },

                    success: function (data) {
                        Cookies.set('uid', data[0].uid);
                        alert("test");
                    },
                    error: function (xhr, status) {
                        alert("Sorry, there was a problem!");
                    },
                });
            })

php代码

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

require_once 'config.php';
$conn = mysqli_connect($hn, $un, $pw, $db);
if ($conn->connect_error) die($conn->connect_error);

$uname=mysql_real_escape_string($_POST['uname']);
$pass=md5(mysql_real_escape_string($_POST['pass']));

$result = $conn->query("SELECT * FROM users WHERE uname LIKE '$uname' AND upass LIKE '$pass'");     

    $outp = "[";
    while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
            $outp .= '{"uid":"'.$rs["uid"].'"}';
        }
        $outp .="]"; 

$conn->close();
echo($outp);

Answer 1

您的表单可能仍然试图以正常的方式提交，因为您没有正确地拦截它。

在表单中添加一个Id。

<form id="myForm" method="post" action="">

将您的代码更改为下面的代码并尝试一下。我们要做的是拦截表单提交并防止默认操作。

$("#myForm").submit(function(event){
    $.ajax({
        cache: false,
        url: 'php/login.php',
        type: 'POST',
        dataType: 'json',
        data: {
            uname: $('#uname').val(),
            pass: $('#pass').val()
        },

        success: function (data) {
            Cookies.set('uid', data[0].uid);
            alert("test");
        },
        error: function (xhr, status) {
            alert("Sorry, there was a problem!");
        },
    });
    event.preventDefault();
});