如何使用 jQuery 提交表单而不刷新？答案

【问题标题】：How can I use jQuery to submit a form without refreshing?如何使用 jQuery 提交表单而不刷新？
【发布时间】：2011-08-31 07:01:47
【问题描述】：

我有这个表格：

<form id="myform" name="myform" action="test.php" method="post">
<input type="text" name="shout-in" id="proShoutIn" maxlength="80" />
<a href="#" id="add_shout"><img src="post.gif"/></a>
</form>

如何做一个 ajax 帖子以便我可以使用if (isset($_POST['shout-in'])){..do something..}？我需要获取在<input> 中输入的值并使用它进行发布。

有什么想法吗？谢谢

【问题讨论】：

标签： php jquery ajax forms post

【解决方案1】：

$('#add_shout').click(function () {
    var $form=$('#myform');
    $.post($form.attr('action'), $form.serialize());
});

$.post() - $.ajax() POST 方法的简写
.serialize() - 以标准 URL 编码符号创建文本字符串

使用$.post() 的第三个（可选）参数，您可以指定一个回调函数，该函数将接收作为其唯一参数返回的任何内容。它会在 AJAX 查询成功完成时运行（因此您可以根据 AJAX 调用等进行 DOM 修改）。

您可能还想阻止默认表单提交（在许多浏览器中，在输入字段中按 Enter 会触发它）并运行 AJAX 提交：

$('#myform').submit(function (e) {
     $('#add_shout').click();
     e.preventDefault();
});

【讨论】：

我在哪里适合这个 php if (isset($_POST['shout-in'])){...}
@Patrioticcow 我给你的是 Javascript (jQuery) 代码。你写的那个 PHP 行应该进入你的test.php。
如果php在同一个文件中怎么办？这会是个问题吗？
我应该使用if (isset($_POST['shout-in'])){...}还是if (isset($_POST)){...}？
@Patrioticcow 使用if (isset($_POST['shout-in'])){...} 是对的。通常，如果它们在同一个文件中，如果您以正确的方式处理它，这不是问题。对于更简洁的代码，您应该将您的 Javascript 分离到一个 .js 文件中，并将其包含在 <script src="xy.js"> 中（从长远来看会更容易调试和更改）。

【解决方案2】：

   $("#myform").submit(function (e) {
      $.post(this.action, $(this).serialize(), function (data) {
         //handle response
      });
      //prevent form from submitting.  In jQuery, do not use return false
      e.preventDefault();
   }

【讨论】：

【解决方案3】：

Nettuts 加：

Submit A Form Without Page Refresh using jQuery

【讨论】：

【解决方案4】：

$.post("test.php", $("#myform").serialize(),
    function(data) {
      // do something with the response
    }
);

【讨论】：

我在哪里适合这个 php if (isset($_POST['shout-in'])){...}