使用Ajax实现PHP向JavaScript传变量返回undefined问题排查

我来帮你梳理下代码里的问题，一步步解决这个undefined的问题：

1. JS选择器错误，导致data1为undefined #

你的HTML里用户名输入框的id是usernameSignUp，但JS里用的是$("#username")，找不到对应的元素，所以val()返回undefined。

2. AJAX请求的data格式不匹配，PHP无法正确接收 #

你写的data: ({data1})是ES6对象简写，最终传递的键名是data1，但PHP里是从$_POST['username']取值，两者不对应；而且你还需要传递密码，不然PHP里的$_POST['password']也会报错。

3. 表单默认提交行为未阻止 #

点击提交按钮后，表单会按照默认的action跳转页面，AJAX请求可能还没完成就被中断，所以你需要阻止表单的默认提交行为。

4. PHP里的变量输出错误 #

你写的echo (".$user.");里，变量是$username不是$user，而且字符串拼接的语法也错了，直接echo $username;就可以。

HTML部分 #

<form id="signupForm" action="signUp.php" method="POST">
  <input id="usernameSignUp" type="text" name="username" placeholder="Username">
  <br>
  <input id="passwordSignUp" type="password" name="password" placeholder="Password">
  <br>
  <button class="BUTTON" type="submit" name="signup">SIGN UP</button>
</form>

JS部分 #

$(function(){
  // 监听表单提交事件，而不是直接执行
  $("#signupForm").on("submit", function(e){
    // 阻止表单默认提交行为
    e.preventDefault();
    
    // 正确获取输入框的值
    var username = $("#usernameSignUp").val();
    var password = $("#passwordSignUp").val();
    
    console.log(username, password); // 现在应该能正常打印值了
    
    $.ajax({
      type: "POST",
      url: 'signUp.php',
      // 传递正确的键值对，和PHP里的$_POST键对应
      data: {
        username: username,
        password: password,
        signup: true // 因为PHP里判断isset($_POST['signup'])，所以需要传递这个参数
      },
      success: function(data) {
        console.log("success");
        console.log("返回的用户名：", data); // 打印PHP返回的内容
      },
      error: function(xhr, status, error) {
        console.log("请求出错：", error); // 增加错误处理，方便排查问题
      }
    });
  });
});

PHP部分 #

if (isset($_POST['signup'])){
  // 数据库连接
  include_once 'databaseHandler.php';
  
  // 先检查变量是否存在，避免未定义索引错误
  $username = isset($_POST['username']) ? mysqli_real_escape_string($conn, $_POST['username']) : '';
  $password = isset($_POST['password']) ? mysqli_real_escape_string($conn, $_POST['password']) : '';
  
  // 正确输出变量
  echo $username;
}

• 处理密码的时候，绝对不要直接存明文，一定要用password_hash()加密后再存入数据库，验证的时候用password_verify()。
• 可以在PHP里增加数据校验，比如检查用户名和密码是否为空，再进行数据库操作。
• AJAX的error回调很重要，可以帮你排查请求失败的原因，比如网络问题、PHP报错等。

内容的提问来源于stack exchange，提问作者Jasmine.661