表单提交跳转页面而非AJAX加载内容的问题排查

你的代码存在两个核心问题，导致页面跳转且预期功能失效：

1. 提交按钮选择器不匹配：JS中使用$("#adminSubmit")获取按钮值，但HTML里的提交按钮仅设置了class="adminSubmit"，没有id="adminSubmit"，该选择器会返回空对象，虽不会直接阻止event.preventDefault()执行，但会破坏AJAX参数的完整性。
2. AJAX参数与PHP接收键不对应：JS传递的参数键为name、email、message，但HTML表单的name属性是username、password、passwordConfirm，PHP尝试读取$_POST["username"]，而AJAX并未传递该键，即使AJAX执行成功也无法返回预期内容。

另外，表单保留action属性可能在异常场景下触发默认跳转，建议移除。

修正后的代码 #

JS代码

$(document).ready(function() {
  $("form").submit(function(event) {
    event.preventDefault(); // 强制阻止默认表单提交行为
    // 修正变量名和选择器，匹配HTML结构
    var username = $("#username").val();
    var password = $("#password").val();
    var passwordConfirm = $("#passwordConfirm").val();
    var adminSubmit = $(".adminSubmit").val();

    // 修正参数键，与HTML的name属性、PHP接收逻辑对齐
    $("#formMessage").load("submittest.php", {
      username: username,
      password: password,
      passwordConfirm: passwordConfirm,
      adminSubmit: adminSubmit
    });
  });
});

HTML代码

<script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>

<!-- 移除action属性，避免意外跳转 -->
<form method="post">
  <label for="username"> enter your new username: </label><br>
  <input type="text" id="username" name="username"><br>

  <label for="password">enter your new password:</label><br>
  <input type="text" id="password" name="password"><br>

  <label for="passwordConfirm"> confirm your password: </label><br>
  <input type="text" id="passwordConfirm" name="passwordConfirm"><br>

  <input type="submit" class="adminSubmit" name="adminSubmit" value="Create your account">

  <p id="formMessage"></p>
</form>

PHP代码（可选优化）

增加参数存在性判断，避免无参数时报错：

<?php
echo isset($_POST["username"]) ? $_POST["username"] : "";
?>

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