Question

我有一个包含多个表单的页面。当用户填写其中一个表单时，我想将其发送到服务器。但是，我需要浏览器继续显示原始页面，以便用户可以提交其他表单。因此，我不能使用表单中的“action”属性和“submit”类型的按钮。

在咨询the jQuery.post docs后，我找到了以下解决方案：

<html>
    <head>
        <link rel="stylesheet" href="jquery-ui-1.11.3/jquery-ui.css">
        <script src="jsFiles/jquery-2.1.3.min.js"></script>
    </head>

    <body>
        <form id="form">
            Name:<br> <input type="text" name="name"> <br>
            Email:<br> <input type="text" name="email"> <br>
            <button id="button" onclick="submitForm();"> Submit </button>
        </form>

        <script>
        function submitForm() {
            var postData = $('#form').serialize();
            var jqxhr = $.post("SaveForm.jsp", postData ,function() {
            })
              .done(function() {
                alert("The form was submitted successfully");
              })
              .fail(function() {
                alert("Error submitting the form.");
              })
        }
        </script>
    </body>
</html>

上面的代码完成了我想要它做的事情，但它有一个非常特殊和破坏性的副作用，即修改我的URL以包含我发布的参数。

因此，当我填写我的姓名和电子邮件时，我会“重定向”给自己，但网址中会显示名称和电子邮件参数：

http://localhost:8080/Prototype/TestPost.html?name=Lev&email=Storytime%40gmail.com

现在，我绝对不希望“name = Lev＆amp; email = Storytime％40gmail.com”成为我网址的一部分。这些参数也不适用于TestPost.html，而是适用于SaveForm.jsp，所以这一切都非常错误。

我还想提一下SaveForm.jsp按预期工作。它接收参数，将它们保存到数据库并返回成功响应。

我错过了什么？

感谢。

修改

谢谢大家。我无法使用“return false”语句来避免刷新，所以我不得不使用jQuery的“on click”选项。我也不明白如何明确地使用ajax会有什么不同，因为jQuery的文档似乎说这篇文章只是Ajax的语法糖。

对我有用的完整代码是：

<html>
    <head>
        <link rel="stylesheet" href="jquery-ui-1.11.3/jquery-ui.css">
        <script src="jsFiles/jquery-2.1.3.min.js"></script>
    </head>

    <body>
        <form id="form" method="post">
            Name:<br> <input type="text" name="name"> <br>
            Email:<br> <input type="text" name="email"> <br>
            <button id="button"> Submit </button>
        </form>

    <script>
        $( document ).ready(function() {
            $("#button").click(function( event ) {
                event.preventDefault();
                var postData = $('#form').serialize();
                var jqxhr = $.post("SaveForm.jsp", postData ,function() {
                }).done(function() {
                    alert("The form was submitted successfully");
                }).fail(function() {
                    alert("Error submitting the form.");
                })
            });
        });
    </script>

    </body>
</html>

Answer 1

如果您未在表单上指定method属性，则默认情况下为GET，这就是您获取网址参数的原因。此外，由于您没有停止默认操作，您的表单正在提交（重新加载效果），因此我建议您使用以下代码来帮助您：

<script> 
 $(function() { //executes js code after html has been loaded
    $("#button").on("click", function(e) {
      e.preventDefault(); //avoids to reload the page
      var postData = $('#form').serialize();
      var jqxhr = $.post("SaveForm.jsp", postData ,function() {
      }).done(function() {
          alert("The form was submitted successfully");
       })
       .fail(function() {
           alert("Error submitting the form.");
         })
     }
  });
</script>

然后删除按钮上的onclick以获得更清晰的HTML：

<button id="button"> Submit </button>

Answer 2

如果您不想使用jQuery的on click并仍然坚持使用submit功能，您最后可以添加return false;以阻止表单提交。

如下所示

function submitForm() {
  var postData = $('#form').serialize();
  var jqxhr = $.post("SaveForm.jsp", postData ,function() {
  })
  .done(function() {
    alert("The form was submitted successfully");
  });
  .fail(function() {
    alert("Error submitting the form.");
  })
  return false;
}

希望这有帮助。

Answer 3

我猜，你没有通过ajax提交表格。

添加return false;，它不会重定向并通过ajax提交。

  function submitForm() {
      var postData = $('#form').serialize();
      var jqxhr = $.post("SaveForm.jsp", postData, function() {})
        .done(function() {
          alert("The form was submitted successfully");
        })
        .fail(function() {
          alert("Error submitting the form.");
        })

      return false;
    }

jQuery.post（）有改变我的URL参数的副作用

修改

3 个答案: