Best way to append querystring ajax

Question

I am developing an ajax filtering system for a website.

The point where the end user chooses the filters will already have a query string on the URL.

I'd like to obtain this query string and append my data to it, I require both the input name & value.

The JS I have currently, which is a bit of a bodged job I know - JS is not my strong point!

    $( "#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;
}

With this, it currently returns the querystring as: camping1,TF74AA,20:. The 1,TF74AA,20 is the current query string, camping being a checkbox selected before filtering. As you can see, there's no comma between camping & 1. Also, this does not include any of the names, only values.

Ideally I'd like the query string to be:

?name=value&name=value OR in JSON format, and then I can parse it server side and return a JSON response.

I've been searching for a tutorial based on what I'm looking to achieve, but I am struggling. Hence me using various tutorials and taking parts from each.

I hope I've explained well enough.

Don't use a query string, use an object with a property for each parameter. jQuery will automatically convert it to a query string for you. — Barmar, Aug 29 '14 at 13:18
Ok, so working on your suggestion the Form Data is now appearing as `[object Object][object Object]` — Telford Computer-DoctorLtd, Aug 29 '14 at 13:27
Don't use `FormData`, just use an ordinary Javascript object. `{ name1: value1, name2: value2, ...}` — Barmar, Aug 29 '14 at 13:30
There is no associative arrays in javascript. There are arrays and objects. Vars is an array. — Alex Shilman, Aug 29 '14 at 13:38

score 0 · Answer 1 · edited May 23 '17 at 11:49

I would suggest using window.location.search.substring(1) to get the query string from the current URI (note substring(1) part removes the ?).

I would then put that into javascript object. There are jQuery plugins that do this or you can build your own. See this question for some ideas - The $.param( ) inverse function in JavaScript / jQuery.

You now have a javascript object which represents your filter conditions. You can modify this object as necessary based on user interaction and then serialize to JSON, or back into a query string using $.param(), or simply pass the object as data property to your $.ajax() call and it will be serialized to query string by jQuery.

Best way to append querystring ajax

1 Answers1