如何在jquery中创建查询字符串？ [英] How to Create query string in jquery?
问题描述
我对此感到困惑。我想在dyanmic过滤器上创建查询字符串。现在我已添加到过滤器的类型选择你最喜欢的运动和选择你最喜欢的食物： ..所以将来它将是更多的过滤器，它将在复选框类型和选择框中。所以我想让它充满活力。这是我的HTML代码： -
I am getting stuck on this. I want to make query string on dyanmic filters. Right now i have added to types of filter Select your favorite sports and Select your favorite food: .. So in future it will be more filters and it will be in check boxes type and selectbox only. So i want to make it fully dynamic. Here is my html code:-
<body>
<select class="getfilterchange" name="hobby">
<option value="">Select</option>
<option value="Chess">Chess</option>
<option value="Hockey">Hockey</option>
</select>
<h3>Select your favorite sports:</h3>
<label><input class="getfilter" type="checkbox" value="football" name="sport"> Football</label>
<label><input class="getfilter" type="checkbox" value="baseball" name="sport"> Baseball</label>
<label><input class="getfilter" type="checkbox" value="cricket" name="sport"> Cricket</label>
<label><input class="getfilter" type="checkbox" value="boxing" name="sport"> Boxing</label>
<label><input class="getfilter" type="checkbox" value="racing" name="sport"> Racing</label>
<label><input class="getfilter" type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
<h3>Select your favorite food:</h3>
<label><input class="getfilter" type="checkbox" value="choclate" name="food"> Choclate</label>
<label><input class="getfilter" type="checkbox" value="biscuits" name="food"> Biscuits</label>
<label><input class="getfilter" type="checkbox" value="candy" name="food"> Candy</label>
<label><input class="getfilter" type="checkbox" value="Cake" name="food"> Cake</label>
<br>
</body>
这里我尝试了一些jquery代码： -
Here i have some try to jquery code :-
<script type="text/javascript">
$(document).ready(function() {
var names = [];
$(".getfilter").click(function(){
if(jQuery.inArray($(this).attr('name'), names )=='-1'){
names.push($(this).attr('name'));
}
var favorite = [];
$.each($("input[name='"+$(this).attr('name')+"']:checked"), function(){
favorite.push($(this).val());
});
console.log(names);
console.log(favorite);
});
});
我的预期输出如下：
?sport=football~baseball~cricket&food=choclate~biscuits
如果用户先选择食物，那么它应该是这样的： -
If user has selected food first then it should be like this :-
?food=choclate~biscuits&sport=football~baseball~cricket
请帮助我如何实现此类功能
注意： - 我的过滤器将是动态的，如果我添加更多过滤器会自动嵌入到查询字符串中。
在图像中显示Getvalues按钮..我想点击复选框获取查询字符串。忘了没有按钮。谢谢
Please help me how can i achieve this type of functionality note :- My filters will be dynamic means if i add more filters it will automatically embedded to query string. In image it's showing Getvalues button.. I want to get query string on click on checkbox. Forget about there is no button. Thanks
推荐答案
您的HTML代码非常完美，您需要对javascript代码进行一些修改才能使其正常工作。
Your html code is perfect and you need some modification in javascript code to get it work.
您还需要在历史记录中使用新查询字符串推送更新后的URL状态。因此，您可以在不加载页面的情况下更新浏览器的URL。
You also need to push state of updated url with new query string in history. So, you can update url of browser without page load.
$(document).ready(function() {
var queryStringObject = {};
$(".getfilter").click(function(){
var name = $(this).attr('name');
queryStringObject[name] = [];
$.each($("input[name='"+$(this).attr('name')+"']:checked"), function(){
queryStringObject[name].push($(this).val());
});
if(queryStringObject[name].length == 0){
delete queryStringObject[name];
}
var queryString = "";
for (var key in queryStringObject) {
if(queryString==''){
queryString +="?"+key+"=";
} else {
queryString +="&"+key+"=";
}
var queryValue = "";
for (var i in queryStringObject[key]) {
if(queryValue==''){
queryValue += queryStringObject[key][i];
} else {
queryValue += "~"+queryStringObject[key][i];
}
}
queryString += queryValue;
}
console.log(queryStringObject);
console.log(queryString);
if (history.pushState) {
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + queryString;
window.history.pushState({path:newurl},'',newurl);
}
});
});
<body>
<h3>Select your favorite sports:</h3>
<label><input class="getfilter" type="checkbox" value="football" name="sport"> Football</label>
<label><input class="getfilter" type="checkbox" value="baseball" name="sport"> Baseball</label>
<label><input class="getfilter" type="checkbox" value="cricket" name="sport"> Cricket</label>
<label><input class="getfilter" type="checkbox" value="boxing" name="sport"> Boxing</label>
<label><input class="getfilter" type="checkbox" value="racing" name="sport"> Racing</label>
<label><input class="getfilter" type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
<h3>Select your favorite food:</h3>
<label><input class="getfilter" type="checkbox" value="choclate" name="food"> Choclate</label>
<label><input class="getfilter" type="checkbox" value="biscuits" name="food"> Biscuits</label>
<label><input class="getfilter" type="checkbox" value="candy" name="food"> Candy</label>
<label><input class="getfilter" type="checkbox" value="Cake" name="food"> Cake</label>
<br>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
这篇关于如何在jquery中创建查询字符串？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
