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

问题描述

| 我目前正在使用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 \”之类的东西。     

解决方法

        

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

要么

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

    ,        使用jQuery的

serialize()

方法。 jsFiddle。     ,        好吧，您真正想做的是提交表单而不刷新页面。因此，这是这样做的方法： 将提交按钮添加到表单 钩住表单的Submit事件 取消默认操作，即使用响应刷新页面 通过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>

    ,        您可以检查选择了哪些无线电输入并相应地构建网址，例如：

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