通过ajax请求提交html表单？ [复制]答案

【问题标题】：html form submission via an ajax request? [duplicate]通过ajax请求提交html表单？ [复制]
【发布时间】：2012-06-30 13:51:56
【问题描述】：

可能重复：
jQuery AJAX submit form

我在页面 A 上有一个表单，而不是我发布到新页面，有没有一种方法可以代替我执行 onSubmit ajax 请求？我想让页面能够将结果加载到 div 中。

我知道如何为调用类编写脚本，但我不确定我是否必须手写它，或者是否可以获取所有表单信息并发送它而无需将其全部编码到属性。我在想我可以做一些类似的事情：onClick，发布表单但将结果返回到一个 div。

想法？想法？

【问题讨论】：

这是一个非常标准的 ajax 调用。 api.jquery.com/jQuery.ajax
我实际上想知道您是否需要 AJAX。难道你不能只是将表单提交到同一个页面并让 PHP 用表单数据动态加载 div 吗？有什么理由不能这样做吗？
是的，我不想硬刷新页面，所以我不想提交给自己。

标签： javascript jquery html ajax forms

【解决方案1】：

$.ajax({
 url: 'mypage.html',
 success: function(data){
    $('.result').html(data);
 },
 error: function(){
   alert('failure');
 }
});

那么你就有了一个 div：

<div class="result"> </div>

这将自动填充您的 ajax 帖子的结果。

http://api.jquery.com/jQuery.post/

另请参阅大量相关问题：Jquery checking success of ajax post

【讨论】：

因为它没有定义数据，它会只是提交该表单中的所有内容吗？

【解决方案2】：

尝试使用 JQuery 的 serialize (API ref here)

编辑：像这样：

 $("input.submit").click( function() {
    $.ajax( {
      type: "POST",
      url: $("form").attr( 'action' ),
      data: $("form").serialize(),
      success: function( response ) {
        //Code to process the response
      }
    });
    return false;
  } );

【讨论】：

那么，序列化会从表单中获取所有数据吗？
是的，它把它解析成一个字符串。
谢谢！知道这一点真是太棒了！
如何从特定表单中获取数据，可能通过使用表单的id $("#form").serialize();似乎对我不起作用。