query string to url with Ajax

Question

I want to update my url, based on some checkboxes...

I now have an url that looks like www.mywebsite.com/index.php?city=Amsterdam

The city parameter I use to get data from mysql and display that on my page. On the page I also have some checkboxes. I want to update the url if a user clicks on a checkbox, refresh the page, and use the new url to make a new query to the database.

On http://api.jquery.com/serialize/ I found something I liked ;) The example on the bottom shows what I want. Only this example displays the result. Can someone help me to get that result in the url ?

So after clicking on some checkboxes I would like to have an url that looks like www.mywebsite.com/index.php?city=Amsterdam&single=Single2&multiple=Multiple3&radio=radio1

I know PHP, but my knowledge of jquery and ajax is 0 ;) I used google to search, but after some hours I still didn't find anything use-full. Is there someone who can help me ?

For changing the URL you may have a look at this [thread](http://stackoverflow.com/questions/10953792/change-url-in-browser-address-bar-without-reload-existing-page) and serializing a custom object in jquery is done with the [.param](http://api.jquery.com/jQuery.param/) function. The one you named only works for html `
`. — Imperative, Feb 20 '13 at 09:54

score 0 · Answer 1 · answered Feb 20 '13 at 09:57

try this

 $.ajax({
     url:"www.mywebsite.com/index.php"; // path to your url
     type: "get", //post or get
     data:$('#yourFormID').serialize(),
     success:function(){   //function called when ajax is completed
        alert('done');
     }
 });

score 0 · Answer 2 · answered Feb 20 '13 at 10:28

If you need to refresh the page with a new url, you need to serialize the form when user click on a checkbox and update the url (updating url will refresh page, if you don't want to refresh page, you will have to user pushstate functionality or a hash in the url).

Try this:

    var $form = $('form');
    $('#my-checkbox').on('click', function() {
        window.location.search = '?' + $form.serialize();
    });

query string to url with Ajax

2 Answers2