AJAX .post方法无法向PHP脚本传递数据问题排查与解决

最近开发用户注册功能时遇到了一个离谱的问题：点击提交按钮后，页面立刻弹出“注册成功”提示并跳转到登录页，但去数据库一看，用户数据根本没存进去！排查后发现是AJAX的POST请求没正确工作，甚至submitInfo()里的AJAX逻辑几乎被跳过了，下面分享我的问题和解决过程。

初始代码的问题 #

原HTML/JS代码（已省略jQuery和MD5加密函数的引入） #

<h2>First name:</h2> <input id="firstNameInput" type="text" maxLength="20"> 
<h2>Last name:</h2> <input id="lastNameInput" type="text" maxLength="20"> 
<h2>Create a username:</h2> <input id="createUserInput" type="text" maxLength="20"> 
<h2>Create a password:</h2> <input id="createPassInput" type="text" maxLength="20"> 
</br> </br> 
<input id="submitCredsButton" type="submit" onclick="submitInfo()"> 
<script> 
function submitInfo() { 
    var postData = [{ 
        firstName : document.getElementById("firstNameInput"), 
        lastName : document.getElementById("lastNameInput"), 
        username : document.getElementById("createUserInput"), 
        hashPass : MD5((document.getElementById("createPassInput")).value) 
    }]; 
    $.ajax({ 
        type: "POST", 
        url: "phpScripts/signup.php", 
        data: "postData", 
        dataType: "text", 
    }); 
    alert("Sign up Successful! Please log in to enter."); 
    window.open("login.php", "_self"); 
} 
</script>

原PHP脚本 #

<?php 
$servername = "*****"; 
$username = "*****"; 
$password = "*****"; 
$dbname = "*****"; 

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 

// Check connection 
if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 

//posts data to db 
$stmt = $data->('INSERT INTO userlist (firstName,lastName,username,hashedPass) VALUES (:firstName, :lastName, :username, :hashPass)'); 
$stmt->execute($data); 
?>

揪出的核心问题 #

1. AJAX数据传递完全错了：data: "postData"这里把变量名当成字符串传了，根本没把实际的postData对象发出去；而且postData被定义成了数组（应该是普通对象），另外获取输入框值的时候没加.value，传的是DOM元素不是用户输入的内容！
2. 异步逻辑顺序搞反了：AJAX是异步请求，我居然在请求还没发完甚至没成功的时候，直接就弹提示跳页面了，难怪不管数据存没存进去都提示成功。
3. PHP代码语法和逻辑全错：$data->()这种写法完全不对，而且也没从$_POST里接收前端参数，更别说正确执行插入语句了。

修正后的可用代码 #

修正后的HTML/JS #

<h2>First name:</h2> <input id="firstNameInput" type="text" maxLength="20"> 
<h2>Last name:</h2> <input id="lastNameInput" type="text" maxLength="20"> 
<h2>Create a username:</h2> <input id="createUserInput" type="text" maxLength="20"> 
<h2>Create a password:</h2> <input id="createPassInput" type="text" maxLength="20"> 
</br> </br> 
<input id="submitCredsButton" type="submit" onclick="submitInfo()"> 
<script> 
function submitInfo() { 
    var fName = document.getElementById("firstNameInput").value; 
    var lName = document.getElementById("lastNameInput").value; 
    var uName = document.getElementById("createUserInput").value; 
    var pPass = document.getElementById("createPassInput").value; 
    var hPass = MD5((document.getElementById("createPassInput")).value); 

    if(fName.length <= 0 || lName.length <= 0 || uName.length <= 0 || pPass.length <= 0) { 
        alert("Please verify all fields have been filled out."); 
    } else { 
        $.ajax ({ 
            type: "POST", 
            url: "phpScripts/signup.php", 
            data: {firstName: fName, lastName: lName, userName: uName, hashPass: hPass}, 
            dataType: "text", 
            success: function(response) { 
                alert("Sign up Successful! Please log in to enter."); 
                window.open("login.php", "_self"); 
            } 
        }); 
    } 
} 
</script>

修正后的PHP脚本 #

<?php 
$servername = "******"; 
$username = "******"; 
$password = "******"; 
$dbname = "******"; 

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 

// Check connection 
if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 
?> 
<?php 
//posts data to db 
$fName = $_POST["firstName"]; 
$lName = $_POST["lastName"]; 
$uName = $_POST["userName"]; 
$hPass = $_POST["hashPass"]; 

$sql = "INSERT INTO userlist ( firstName,lastName,username,hashedPass ) VALUES ( '$fName', '$lName','$uName','$hPass' )" ; 
$result = $conn->query($sql); 

if($result){ 
    echo "true"; 
} else{ 
    echo "false"; 
} 
?>

关键修正点总结 #

• JS端：
  • 先获取所有输入框的.value，确保传递的是用户输入内容而非DOM元素
  • 加了表单空值验证，避免空数据提交
  • 把AJAX的data改成了实际的键值对对象，去掉了错误的引号包裹
  • 将成功提示和页面跳转放到success回调里，确保只有请求成功后才执行
• PHP端：
  • 正确通过$_POST接收前端传递的参数
  • 使用mysqli的query()方法正确执行插入语句（注：这里可以进一步优化为预处理语句，防止SQL注入风险）
  • 添加了查询结果判断，给前端返回执行状态

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