将 ajax 与现有表单一起使用答案

【问题标题】：use ajax with an existing form将 ajax 与现有表单一起使用
【发布时间】：2012-09-20 08:57:38
【问题描述】：

我想用 ajax 处理这个表单，但我并不完全清楚在发送之前应该如何处理数据。这是我的表单，它是一个输出它的表达式引擎模块，所以我不知道 php 函数会发生什么：

<form id="bookmark_form_entry_106" class="bookmark_form" name="bookmark_form" method="post" action="http://mysite.com//S=1b73e2e22729ccf0613b758ecc7e2631fab28745/">

<div class="hiddenFields">
<input type="hidden" name="XID" value="438068dba50235d9992e1492a6171e892f7bac60">
<input type="hidden" name="ACT" value="50">
<input type="hidden" name="RET"     value="http://mysite.com/S=1b73e2e22729ccf0613b758ecc7e2631fab28745/video/esegui_slq_1">
<input type="hidden" name="type" value="entry">
<input type="hidden" name="data_id" value="106">
<input type="hidden" name="site_id" value="3">
</div>


<input type="submit" value="add bookmark">

</form>

我将使用 jQuery $.ajax();但我不知道如何处理表单数据：

$.ajax({  
type: "POST",  
url: "http://mysite.com//S=1b73e2e22729ccf0613b758ecc7e2631fab28745/",  // is this correct?
data: ,  // what data should go there?
success: function() {  
 // wohoo, this works! 
}  
});

我是表单的新手，所以我不确定我是否必须更多地了解 POST 脚本将如何处理我的数据，或者是否知道表单本身的内容就足够了。

我也很好奇如何使用网络检查器（或萤火虫）进行测试，谢谢！

【问题讨论】：

你为什么使用 jQuery？我的意思是你明确需要这样做吗？表单应该只是通过带有纯 html 的帖子提交其自身...
我想使用 ajax 来提交它，因为表单处理了“喜欢这个条目”的事情，而且对我来说重新加载页面似乎是徒劳的。不仅如此，还有一个烦人的消息页面告诉提交很好:(。

标签： jquery ajax forms firebug web-inspector

【解决方案1】：

要获取数据，您需要 jQuery 的序列化函数 (http://api.jquery.com/serialize/)。

var data = $('#form_id').serialize()

然后在您的 AJAX 调用中使用 data 变量！

根据您处理表单提交的确切方式，您应该能够将$(this) 变量作为您已提交的表单。

因此，构建调用的好方法是：

$.ajax({  
type: "POST",  
url: $(this).attr('action'),  // read the action attribute of the form
data: $(this).serialize(),  // what data should go there?
success: function() {  
 // wohoo, this works! 
}  
});

【讨论】：

【解决方案2】：

在data 上使用$('#bookmark_form_entry_106').serialize() 设置帖子值

$.ajax({  
    type: "POST",  
    url: "http://mysite.com//S=1b73e2e22729ccf0613b758ecc7e2631fab28745/",  // is this correct?
    data: $('#bookmark_form_entry_106').serialize(),  // what data should go there?
    success: function() {  
     // wohoo, this works! 
    }  
});

【讨论】：