追加查询字符串的最佳方法ajax
问题描述:
我正在为网站开发ajax filtering system
。追加查询字符串的最佳方法ajax
最终用户选择过滤器的点已经在URL上有一个查询字符串。
我想获得这个查询字符串并追加我的数据,我需要输入名称&值。
我目前所拥有的JS,这是我知道的一份懒散工作 - JS并不是我的强项!
$("#narrowSearch").submit(function(event) {
function checkInputs(){
var $checkboxes = $("input:checkbox");
var opts = [];
$checkboxes.each(function(){
if (this.checked){
opts.push(this.value);
}
});
return opts;
}
var opts = checkInputs();
if(document.location.search.length) {
opts += getUrlVars();
}
updateVenues(opts);
event.preventDefault();
});
function updateVenues(opts){
$.ajax({
type: "POST",
url: "/venue-search/ajax/",
dataType : 'json',
cache: false,
data: opts,
success: function(records){
$("#searchResults").empty();
$.each(records, function(idx, record){
$("#searchResults").append('<section class=\"griditem\"><a href=\"/venue-preview/'+record.id+'" class=\"various fancybox.ajax\"><span class=\"listing_img\"><img src=\"<?php echo MEDIAURL; ?>'+record.main_image+'\"><span class=\"listing_title\">'+record.title+'</span></span></a></section>');
});
}
});
}
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[1]);
vars[hash[0]] = hash[1];
}
return vars;
}
用此,它当前返回查询字符串为:camping1,TF74AA,20:
。 1,TF74AA,20
是当前查询字符串,露营是在过滤之前选中的复选框。正如你所看到的,野营& 1之间没有逗号。此外,这不包括任何名称,只有值。
理想情况下,我想查询字符串是:
?name=value&name=value
或JSON format
,然后我可以分析它的服务器端,并返回一个JSON响应。
我一直在寻找一个基于我期待实现的教程,但我很挣扎。因此,我使用各种教程,并从每个部分。
我希望我解释得不错。
答
我建议使用window.location.search.substring(1)
从当前URI获取查询字符串(注意substring(1)
部分删除了?
)。
然后我会把它放到javascript对象中。有jQuery插件可以做到这一点,或者你可以建立自己的。看到这个问题的一些想法 - The $.param() inverse function in JavaScript/jQuery。
您现在有一个JavaScript对象,它代表您的过滤条件。您可以根据用户交互的需要修改此对象,然后使用$.param()
序列化为JSON或返回查询字符串,或者将对象作为data
属性传递给您的$.ajax()
调用,并将其序列化为通过jQuery查询字符串。
不要使用查询字符串,请为每个参数使用具有属性的对象。 jQuery会自动将它转换为一个查询字符串。 – Barmar 2014-08-29 13:18:41
好吧,所以对你的建议的工作表单数据现在显示为'[object object] [object Object]' – 2014-08-29 13:27:28
不要使用FormData,只需使用普通的Javascript对象。 '{name1:value1,name2:value2,...}' – Barmar 2014-08-29 13:30:35