How do I construct query strings for ajax url with jquery or javascript?

Question

I'm currently using ajax and jquery to update search results with a form that has different categories for filtering.

My problem is that I want to be able to pass different variables to the url I'm using for my ajax from checkboxes and other form elements from the current page.

I have the url of " http://example.com/search/results/?cat=tech&min=5&max=30 " in my ajax call below and I need that url to update to something like " http://example.com/search/results/?cat=service&min=10&max=30 " or even remove a param if it's not even selected like " http://example.com/search/results/?min=5 "

<form>
    <input type="radio" name="cat" value="" /> None<br />
    <input type="radio" name="cat" value="service" /> Service<br />
    <input type="radio" name="cat" value="tech" /> Tech<br />
    <input type="radio" name="cat" value="other" /> Other<br />

    <input type="radio" name="min" value="5" /> 5<br />
    <input type="radio" name="min" value="10" /> 10<br />
    <input type="radio" name="min" value="15" /> 15<br />

    <input type="radio" name="max" value="5" /> 5<br />
    <input type="radio" name="max" value="10" /> 10<br />
    <input type="radio" name="max" value="15" /> 15<br />
</form>

<div class="result"></div>

<script type="text/javascript">
$(document).ready(function(){
    $('.filter').live('click focus', function(){

        $.ajax({
            url: http://example.com/search/results/?cat=tech&?min=5&max=30,
            context: document.body,
            success: function(data) {
                $('.result').html(data);
            }   
        });

    });
});
</script>

Some how the url in the ajax call above needs to have the params update in the url. Also, not every param will always be included or needed.

It would be nice if I could use something like PHP's http_build_query function that would automatically know what values of the array to replace or something like that but I'm really stuck as to what to do. I'm not sure if I need to create an array and concatantate

Ideally I would be able to have something like " http://example.com/search/results/cat/tech/min/5/30 " if that's at all doable.

Answer 1

Use jQuery's serialize() method.

jsFiddle .

Answer 2

url: 'http://example.com/search/results/?' + $('form').serialize(),

or

url: 'http://example.com/search/results/?' + $('form').serialize().replace(/&=/, '/'),

Answer 3

Well, what you're really trying to do is submit the form without refreshing the page. So here's how to do that:

1. Add a submit button to the form
2. Hook into the submit event of the form
3. Cancel the default action which is to refresh the page with the response
4. Submit via ajax and handle the response

Like this:

<form id="MyFilterForm" action="/myBaseUrl" method="POST">
    ...
    <input type="submit" value="Filter"/>
</form>

<script type="text/javascript">
$(document).ready(function(){
    $('#MyFilterForm').submit(function(event){
        // cancel the default action
        event.preventDefault();

        var theForm = $(this);
        $.post(theForm.attr('action'), theForm.serialize(), function (data){
            $('.result').html(data);
        });
    });
});
</script>

Answer 4

You can check which radio inputs have been selected and build the url accordingly eg:

<input id="radCat" type="radio" name="cat" value="service" /> Service<br />

string url = "http://example.com/search/results/?";

if($("#radCat").attr("checked").val() == "checked") {
    url = url + "cat=" + $("#radCat").attr("value").val();
}