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

Question

我有这种形式：

<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>输入的值并对其进行处理。

有任何想法吗？ 谢谢

Answer 1

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

• $ .post（） -POST方法的$.ajax()速记
• .serialize（） -以标准的URL编码表示法创建文本字符串

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

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

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

Answer 2

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

Answer 3

   $("#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();
   }

Answer 4

Nettuts加：

使用jQuery提交没有页面刷新的表单