使用Jquery过滤结果

我已经在php中为脚本创建了一个搜索表单。 Basicaly这个表单有一些复选框和一个提交按钮。 每个复选框都是一个类别，如果我选中一个或多个复选框，结果将按照类别进行过滤。

这是html代码：

 
 Category 1 Category 2 Category 3   
 
   

我正在尝试使用ajax内联结果，对于我的脚本的大多数部分，我使用JQuery。 任何人都可以帮我弄清楚如何通过ajax实时传递$ _POST数据，而无需重新加载页面？

ps我很抱歉我的英语很差，我希望我很清楚：|

Answer 1

ID必须是唯一的，表单只关心名称。

       
 Category 1 Category 2 Category 3 Submit 
 
   

Answer 2

在jQuery中，当你执行AJAX请求时，你调用：

 jQuery.ajax(options) 

在您的选项对象中，确保设置数据成员。 该成员将javascript对象序列化为post数据。

然后，您可以截取表单提交，并通过AJAX通过构建来自操作和表单字段的请求来提交。

或者你可以使用更简单的方法

 jQuery.post() 

function。

http://docs.jquery.com/Ajax

Answer 3

从这开始：

 $('#search').submit(function(){ var _this = $(this); $.post(_this.attr('action'), _this.serialize(), function(result){ // callback }); return false; }); 

Answer 4

这是一个关于AJAX表单提交的相当详细的教程 ，它应该回答你的问题，尽管我不喜欢查询参数的完成方式。 它有：

 var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone; $.ajax({ type: "POST", url: "bin/process.php", data: dataString, success: function() { $('#contact_form').html("
"); $('#message').html("
Contact Form Submitted!
") .append("
We will be in touch soon.
") .hide() .fadeIn(1500, function() { $('#message').append(""); }); } }); 

我会这样做：

 $.ajax({ type: "POST", url: "bin/process.php", data: { name: name, email: email, phone: phone }, success: function() { $('#contact_form').html("
"); $('#message').html("
Contact Form Submitted!
") .append("
We will be in touch soon.
") .hide() .fadeIn(1500, function() { $('#message').append(""); }); } }); 

如果您想自动构建表单变量而不是自动构建它，请使用jQuery查看Serialize表单到JSON 。