Как я могу построить строки запроса для URL AJAX с JQuery или Javascript?

Question

В настоящее время я использую ajax и jquery для обновления результатов поиска с помощью формы, которая имеет различные категории для фильтрации.

Моя проблема заключается в том, что я хочу иметь возможность передавать различные переменные в URL-адрес.использование для моего ajax из флажков и других элементов формы с текущей страницы.

У меня есть URL "http://example.com/search/results/?cat=tech&min=5&max=30" в моем вызове ajax ниже, и мне нужно, чтобы URL обновился до чего-то вроде" http://example.com/search/results/?cat=service&min=10&max=30" или даже удалите параметр, если он даже не выбран, например "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>

Некоторым образом, для URL-адреса в приведенном выше вызове ajax необходимо обновить параметры в URL-адресе. Также,не каждый параметр всегда будет включен или необходим.

Было бы неплохо, если бы я мог использовать что-то вроде PHP-функции http_build_query, которая бы автоматически знала, какие значения массива заменить, или что-то подобное, но я действительно застрялчто делать. Я не уверен, что мне нужно создать массив и concatantate

В идеале я бы мог иметь что-то вроде "http://example.com/search/results/cat/tech/min/5/30" яе это вообще выполнимо.

Answer 1

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

или

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

Answer 2

Используйте метод jQuery serialize().

jsFiddle .

Answer 3

Вы можете проверить, какие радиовходы были выбраны, и соответственно создать URL, например:

<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();
}

Answer 4

Что вы действительно пытаетесь сделать, это отправить форму без обновления страницы. Вот как это сделать:

1. Добавить кнопку отправки в форму
2. Подключитесь к событию отправки формы
3. Отмена действия по умолчанию, которое должно обновить страницу с ответом
4. Отправить через ajax и обработать ответ

Как это:

<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>