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

我目前正在使用ajax和jquery来更新搜索结果,其表单具有不同的过滤类别。

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.

我的问题是,我希望能够将不同的变量传递给我用于我的ajax的url,来自当前页面的复选框和其他表单元素。

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"

我在下面的ajax调用中有“http://example.com/search/results/?cat=tech&min=5&max=30”的网址,我需要将该网址更新为“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>

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.

一些如何在上面的ajax调用中的url需要在url中更新params。此外,并非每个参数都会被包含或需要。

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

如果我可以使用类似PHP的http_build_query函数来自动知道要替换的数组的值或类似的东西,那将是很好的但我真的不知道该怎么做。我不确定我是否需要创建一个数组和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.

理想情况下,如果可行,我可以使用“http://example.com/search/results/cat/tech/min/5/30”之类的东西。

4 个解决方案

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

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

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

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