2014-08-29 5 views
0

Я разрабатываю ajax filtering system для веб-сайта.Лучший способ добавить querystring 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.

Я искал учебник, основанный на том, чего я хочу достичь, но я борется. Поэтому я использую различные уроки и получаю детали от каждого.

Надеюсь, я достаточно хорошо объяснил.

+1

Не используйте строку запроса, используйте объект с свойством для каждого параметра. jQuery автоматически преобразует его в строку запроса для вас. – Barmar

+0

Итак, работая над вашим предложением, данные формы теперь отображаются как '[object Object] [object Object]' –

+0

Не используйте 'FormData', просто используйте обычный объект Javascript. '{name1: value1, name2: value2, ...}' – Barmar

ответ

0

Я бы предложил использовать window.location.search.substring(1), чтобы получить строку запроса из текущего URI (примечание substring(1) часть удаляет ?).

Я бы поставил его в объект javascript. Есть плагины jQuery, которые делают это, или вы можете создавать свои собственные. См. Этот вопрос для некоторых идей - The $.param() inverse function in JavaScript/jQuery.

Теперь у вас есть объект javascript, который представляет ваши условия фильтра. Вы можете изменить этот объект по мере необходимости на основе взаимодействия с пользователем, а затем сериализоваться на JSON или вернуться в строку запроса, используя $.param(), или просто передать объект как data в свой вызов $.ajax(), и он будет сериализован для запроса строки jQuery.

Смежные вопросы