如何使用 jquery 或 javascript 为 ajax url 构造查询字符串？答案

【问题标题】：How do I construct query strings for ajax url with jquery or javascript?如何使用 jquery 或 javascript 为 ajax url 构造查询字符串？
【发布时间】：2011-09-05 02:58:21
【问题描述】：

我目前正在使用 ajax 和 jquery 来更新搜索结果，其中包含用于过滤的不同类别的表单。

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

我在下面的 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>

上面的 ajax 调用中的 url 如何需要在 url 中更新参数。此外，并非总是包含或需要每个参数。

如果我可以使用 PHP 的 http_build_query 函数之类的东西，它会自动知道要替换的数组的哪些值或类似的东西，那就太好了，但我真的不知道该怎么做。我不确定是否需要创建一个数组并连接

理想情况下，如果可行的话，我可以拥有类似“http://example.com/search/results/cat/tech/min/5/30”的东西。 p>

【问题讨论】：

标签： php javascript jquery ajax search

【解决方案1】：

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

或

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

【讨论】：

看来我需要使用replace(/\=+|&/g, '/')，不过感谢您的回答。真的很有帮助！

【解决方案2】：

使用 jQuery 的 serialize() 方法。

jsFiddle.

【讨论】：

【解决方案3】：

好吧，您真正想做的是在不刷新页面的情况下提交表单。所以这里是如何做到这一点：

向表单添加提交按钮
挂钩到表单的提交事件
取消使用响应刷新页面的默认操作
通过 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>

【讨论】：

我不想要表单上的提交按钮。我希望每次选择或取消选择表单元素时更新结果。这可能吗？
当然可以。只需加入正确的事件。如果您拥有所有单选按钮，则可以使用“更改”或“点击”事件，以此为例：stackoverflow.com/questions/4305772/…

【解决方案4】：

您可以检查已选择哪些无线电输入并相应地构建 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();
}

【讨论】：