Question

我正在为网站开发ajax filtering system。

最终用户选择过滤器的点已经在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是当前查询字符串，camp是在过滤之前选中的复选框。正如你所看到的，露营和露营之间没有逗号。此外，这不包括任何名称，只包括值。

理想情况下，我希望查询字符串为：

?name=value&name=value或JSON format中的OR，然后我可以解析服务器端并返回JSON响应。

我一直在寻找基于我想要实现的目标的教程，但我正在努力。因此，我使用各种教程并从每个教程中获取部分内容。

我希望我已经解释得很好。

Answer 1

我建议使用window.location.search.substring(1)从当前URI中获取查询字符串（注意substring(1)部分删除?）。

然后我会把它放到javascript对象中。有jQuery插件可以做到这一点，或者你可以自己构建。有关一些想法，请参阅此问题 - The $.param( ) inverse function in JavaScript / jQuery。

您现在有一个javascript对象代表您的过滤条件。您可以根据用户交互根据需要修改此对象，然后使用$.param()序列化为JSON或返回查询字符串，或者只需将对象作为data属性传递给$.ajax()调用它将被序列化为jQuery查询字符串。

追加查询字符串ajax的最佳方法

1 个答案: