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

Question

我有一个简单的登录表单，通过 $.ajax 函数传递给 php。问题是在本地主机上 $.ajax 函数结果有时是成功，有时是错误。大多数时候我取得成功的时候是使用 chrome 调试器。当我检查服务器上的文件时，我只得到 $.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();
});