javascript-如何在jquery中创建查询字符串？
作者：互联网
我对此感到困惑.我想在动态过滤器上查询字符串.现在,我已添加到过滤器类型中选择您喜欢的运动并选择您喜欢的食物：..因此,将来它将有更多的过滤器,并且仅在复选框类型和选择框中.所以我想使其完全动态.这是我的html代码：-
<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代码：-
<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
如果用户首先选择了食物,那么应该是这样的：
?food=choclate~biscuits&sport=football~baseball~cricket
请帮我如何实现这种功能
注意：-我的过滤器将是动态的,如果我添加更多过滤器,它将自动嵌入到查询字符串中.
在图像中,它显示Getvalues按钮.我想在单击复选框时获取查询字符串.忘了没有按钮.谢谢
解决方法:
您的html代码非常完美,您需要对javascript代码进行一些修改才能使其正常工作.
您还需要使用历史记录中的新查询字符串来推送更新的url的状态.因此,您无需页面加载即可更新浏览器的url.
$(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>标签：query-string,javascript,php,jquery 来源： https://codeday.me/bug/20191025/1925875.html