jQuery.when()在表单提交AJAX请求中失效，表单直接提交无数据入库

核心问题是表单缺少指定的id属性，导致你的jQuery事件绑定代码完全没有生效，点击提交按钮时直接触发了表单的默认提交行为，AJAX逻辑根本没执行。

具体修复步骤 #

1. 给表单添加id="test_form" #

你的脚本里用$("#test_form")绑定submit事件，但原表单没有这个id，所以选择器找不到元素，事件绑定失败。修改表单标签：

<form id="test_form" action="test.php" method="POST">

2. 清理对象语法错误 #

formData对象最后一个属性末尾多了个逗号，老版本JavaScript环境可能会解析失败，去掉该逗号：

var formData = {
    name: $("#name").val(),
    email: $("#email").val(),
    superheroAlias: $("#superheroAlias").val() // 去掉这里的逗号
};

3. 优化事件解绑方式 #

.unbind()是jQuery旧版本方法，推荐使用.off()替代，保持API的一致性：

$("#test_form").off('submit').submit();

修改后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Form Example</title>
    <link
      rel="stylesheet"
      href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
    />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
  <body>
    <div class="col-sm-6 col-sm-offset-3">
      <h1>Processing an AJAX Form</h1>
      <form id="test_form" action="test.php" method="POST">
        <div id="name-group" class="form-group">
          <label for="name">Name</label>
          <input
            type="text"
            class="form-control"
            id="name"
            name="name"
            placeholder="Full Name"
          />
        </div>
        <div id="email-group" class="form-group">
          <label for="email">Email</label>
          <input
            type="text"
            class="form-control"
            id="email"
            name="email"
            placeholder="email@example.com"
          />
        </div>
        <div id="superhero-group" class="form-group">
          <label for="superheroAlias">Superhero Alias</label>
          <input
            type="text"
            class="form-control"
            id="superheroAlias"
            name="superheroAlias"
            placeholder="Ant Man, Wonder Woman, Black Panther, Superman, Black Widow"
          />
        </div>
        <button type="submit" class="btn btn-success">
          Submit
        </button>
      </form>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#test_form").on('submit', function( e ) {
                e.preventDefault();

                var formData = {
                    name: $("#name").val(),
                    email: $("#email").val(),
                    superheroAlias: $("#superheroAlias").val()
                };

                function testAjax () {
                    return $.ajax({
                        type: "POST",
                        url: "test2.php",
                        data: formData,
                        dataType: "json",
                        encode: true,
                    });
                }

                $.when( testAjax()
                ).done(function(response) {
                    console.log('response: ', response)
                    $("#test_form").off('submit').submit();
                });
            });
        });
    </script>
  </body>
</html>

额外说明 #

• 因为原表单没有test_formid，你的事件处理函数从未被触发，所以控制台没有任何输出，表单直接执行默认提交逻辑。
• 已经确认test2.php功能正常，修复上述问题后，AJAX请求会先执行，完成后再提交表单到test.php。

内容的提问来源于stack exchange，提问作者c.dasa