jQuery AJAX请求长期处于pending状态问题排查求助

我尝试使用jQuery.ajax({})调用PHP文件，但所有AJAX请求均无法执行，一直处于pending状态，试过多种解决方案都无效。调试时发现AJAX语句完全没有执行，PHP文件甚至一行都没运行，Firefox和Chrome中均出现此问题。

我的JS代码 #

let account= [{email: null, pass: null, accountType: null}]
function logIn() {
    account.email = document.getElementById("emailInput").value;
    account.pass = document.getElementById("passwordinput").value;
    if(account.email.substring(0,1) === '1'){
        account.accountType = "student";
    } else if (account.email === ''/* admin email*/) {
        account.accountType = "super";
    } else {
        account.accountType = "teacher";
    }

    $.ajax({
        url:"logIn.php",
        type: "POST",
        data: {
            email: account.email,
            password: account.pass,
            accountType : account.accountType
        },
        success: function (data) {
            //do something
        }
    });
}

这段代码从HTML的<input>字段获取用户输入，判断accountType后尝试发起AJAX请求。

参考用的PHP文件代码 #

<?php

$conn = mysqli_connect("localhost", "root", "root", "mentorDB");
if($conn->connect_error) {
    die('Connection failed: ' . $conn->connect_error);
}
$email = $_POST['email'];
$password = $_POST['password'];
$accType = $_POST['accountType'];

if ($accType == 'student') {
    $query = "SELECT `student_email`, `user_pass` FROM `students` WHERE `student_email` LIKE ? AND `user_pass` LIKE ?";
    $stmt = $conn->prepare($query);

    if ($stmt === false) {
        die('Error preparing query: ' . $conn->error);
    }
    $stmt->bind_param("ss", $email, $password);
    $stmt->execute();
    $result = $stmt->get_result();

    if ($result->num_rows > 0) {
        //Fetch result rows as associative arrays
        while ($row = $result->fetch_assoc()) {
            $data[] = $row;
        }
    }
    header('Content-Type: application/json');
    echo json_encode($data);

    $conn->close();
} elseif ($accType == 'teacher') {
    $query = "SELECT `teacher_email`, `user_pass` FROM `teachers` WHERE `teacher_email` LIKE ? AND `user_pass` LIKE ?";
    $stmt = $conn->prepare($query);
    if ($stmt === false) {
        die('Error preparing query: ' . $conn->error);
    }

    $stmt->bind_param("ss", $email, $password);
    $stmt->execute();
    $result = $stmt->get_result();

    if ($result->num_rows > 0) {
        //Fetch result rows as associative arrays
        while ($row = $result->fetch_assoc()) {
            $data[] = $row;
        }
    }

    header('Content-Type: application/json');
    echo json_encode($data);
}

JS代码方向的排查点 #

1. account变量定义错误
   你把account定义成了数组（[{email: null, ...}]），但后续直接用account.email赋值，这是给数组对象本身加属性，而不是操作数组里的那个对象。正确的写法应该是：

   // 改成普通对象，不需要数组
   let account = {email: null, pass: null, accountType: null}
   

   或者如果一定要用数组，就操作数组的第一个元素：

   account[0].email = document.getElementById("emailInput").value;
   // 后续的pass、accountType也都改成account[0].xxx
   // AJAX里的data也要对应改成account[0].email等
   

   这个错误会导致传递给PHP的数据异常，甚至可能让AJAX请求无法正常发起。

2. 函数触发方式问题
   检查logIn函数是怎么触发的：如果是通过表单的submit事件触发，一定要阻止表单的默认跳转行为，否则页面会刷新，AJAX请求会被中断，表现为pending。比如：

   // 假设按钮或表单的id是loginBtn
   document.getElementById("loginBtn").addEventListener("click", function(e) {
       e.preventDefault(); // 阻止默认行为
       logIn();
   });
   

3. jQuery是否正确引入
   确保页面里已经加载了jQuery库，比如在<head>标签里添加：

   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   

   如果没引入jQuery，$是未定义的，AJAX代码根本不会执行。

4. 添加错误回调排查
   在AJAX配置里加上error和complete回调，方便查看请求的错误信息：

   $.ajax({
       url:"logIn.php",
       type: "POST",
       data: {
           email: account.email,
           password: account.pass,
           accountType : account.accountType
       },
       success: function (data) {
           console.log("请求成功", data);
       },
       error: function(xhr, status, error) {
           console.log("请求错误：", status, error);
       },
       complete: function(xhr, status) {
           console.log("请求完成状态：", status);
       }
   });
   

   打开浏览器控制台（F12），查看这些日志，能帮你定位问题。

额外的PHP小提醒（可能影响请求状态） #

• $data变量没有初始化，如果查询不到数据，json_encode($data)会报错，建议在开头加上$data = [];
• 没有处理accountType为super的情况，这种情况下PHP没有任何输出，会导致请求一直等待响应，最终超时。

内容的提问来源于stack exchange，提问作者nfh66