我已经阅读了很多关于SO的文章和问题，但是我仍然很困惑如何在我自己的工作中实现这个功能，非常感谢一些有用的指导。
我已经有了一个有两个独立表单的页面-一个是一个简单的搜索，带有一些下拉菜单和文本框输入-我认为这个应该更容易实现。
高级搜索表单通过将简单搜索字段中的任何内容复制到一些隐藏输入中来包含简单搜索值。这个表单也是基于一行三个下拉菜单的，可以根据用户的意愿克隆和删除，以允许搜索任意数量的输入。
我的主要困惑是我的表单的动作点到同一页，我有我所有的php代码采取值和构造一个MySQL查询等，所以我不知道如何使用AJAX请求的success部分。
如果你想看这个页面的完整代码，在这里
显示高级搜索的小提琴在这里:高级搜索小提琴
所以基本上，我想尝试和找出的是如何把一个静态表单，完美地变成一个提交与JQuery和显示一个很好的'搜索'预加载器等。
我们将，您肯定已经完成了这里的艰苦工作;-)jQuery方面是相当直接的。使用序列化的表单数据查询服务器。一些让你走上正轨的东西:
$form = $('.advancedsearchform');
$form.submit(function() {
$.ajax($form.attr('action'), {
data: $form.serialize(),
dataType: 'JSON',
type: 'post',
beforeSend: function() {
var $load = $('#loadingmessage');
if (!$load.length)
{
$load = $('<div id="loadingmessage">').appendTo($form);
}
$load.html('Loading... Please wait...');
},
success: function(response) {
// response is the text sent back by server
// maybe you could use json_encode in PHP with a success message?
},
complete: function() {
// Hide loading message:
$('#loadingmessage').hide();
}
});
return false; // Cancel default event
});
这里有两种方法:
-
拆分页面呈现和搜索处理代码。搜索处理代码应该以特定格式(HTML、XML、JSON)返回搜索结果。在得到搜索结果后，你可以以任何你需要的方式显示它们。
-
保持代码原样，解析AJAX调用返回的数据，从中提取搜索结果部分。如果采用这种方法，AJAX调用将返回整个页面。所以使用jQuery的
find方法，你需要从中提取搜索结果部分。
这回答你的问题了吗?
使用jQuery表单插件。这是一种非常简单的方式来ajax现有的表单。