如何构建jQuery URL或jQuery的查询字符串？

问题描述：

我目前正在使用ajax和jquery来更新具有不同类别筛选的表单的搜索结果。如何构建jQuery URL或jQuery的查询字符串？

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

我有“http://example.com/search/results/?cat=tech &分钟= 5 &最大= 30”链接在下面我ajax调用和我需要的URL更新到例如“http://example.com/search/results/?cat=service & min = 10 & max = 30”或者甚至删除了一个参数，如果它甚至没有被选中就像“http://example.com /搜索/结果/？分钟= 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调用上述NEE链接ds在URL中更新params。而且，并不是每个参数都将被包含或需要。

这将是很好，如果我可以使用像PHP的http_build_query函数，会自动知道要替换的数组的值或类似的东西，但我真的坚持要做什么。我不知道是否需要创建阵列和concatantate

理想情况下，我将能够拥有类似于“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(/&=/, '/'),

看起来我需要使用'取代（/ \ = + |＆/克，“/”）'为感谢您答案虽然。它真的帮了大忙！ – bigmike7801 2011-05-31 23:21:13

答

使用jQuery的serialize()方法。

jsFiddle。

答

那么，你真正要做的是提交表单而无需刷新页面。因此，这里是如何做到这一点：

添加一个提交按钮的形式
钩到表单的提交事件
取消默认的动作是与响应刷新页面
通过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>

我不想在表单上提交按钮。每次选择或取消选择表单元素时，我都希望更新结果。那可能吗？ – bigmike7801 2011-05-31 00:31:26

当然可以。只需勾选正确的事件即可。如果您拥有所有单选按钮，则可以使用“更改”或“单击”事件，以此为例：http：// stackoverflow。COM /问题/ 4305772/jQuery的单选按钮选择跨度升级 – Milimetric 2011-05-31 02:21:52

答

您可以检查哪些无线输入也已经选定，并建立相应的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(); 
}

如何构建jQuery URL或jQuery的查询字符串？

相关推荐