如何在jquery中创建查询字符串？
我对此感到困惑。我想在动态过滤器上查询字符串。现在，我已经添加了过滤器类型Select your favorite sports和Select your favorite food: ..因此，将来它将有更多的过滤器，并且仅在复选框类型和选择框中。所以我想使其完全动态。这是我的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按钮。我想在单击复选框时获取查询字符串。忘了没有按钮。谢谢
2 个答案:
答案 0 :(得分：3)
提交表格
构建和发送带有过滤器参数的请求的最简单方法是将包含过滤器控件的表单提交给服务器，该表单由表单的action属性值定义。如果每次更换过滤器时都需要应用过滤器，则只需以change事件处理程序的形式调用.submit()方法即可。
序列化表格
如果您需要手动构建请求URL，则可以使用.serialize()方法。只需将您的控件放在表单上，就可以通过表单序列化获取查询字符串。
var staticUrl = '/the/path/of/request';
$("#filter").change(function() {
var queryString = $(this).serialize();
var url = !queryString ? staticUrl : staticUrl + '?' + queryString;
console.log(url);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<form id="filter">
<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>
</form>
结果查询字符串是标准的。 PHP服务器应正确解析它。但是，如果需要任何特殊格式，则可以使用正则表达式转换字符串。例如，使用以下命令以~字符分隔同一字段的多个值：
var staticUrl = '/the/path/of/request';
var delimiter = '~';
$("#filter").change(function() {
var queryString = $(this).serialize().replace(/(?<=([^\?\&\=]+=)([^\&\=]+))(\&\1)/g, delimiter);
var url = !queryString ? staticUrl : staticUrl + '?' + queryString;
console.log(url);
});
您可以使用regex101 snippet查看转换结果。
注意，在正则表达式中使用零宽度正向后断言。它需要浏览器支持ES2018。
构建查询字符串表单数组
如果不可能使用零宽度正向后置断言，则可以使用经典方式：使用serializeArray方法将一组表单元素转换为名称和值的数组，然后构建查询字符串从数组中获取。
serializeArray为每个控件创建一个项目。可以使用reduce方法按字段名称对表单值进行分组。
var staticUrl = '/the/path/of/request';
var delimiter = '~';
$("#filter").change(function() {
var query = $(this)
// Create array
.serializeArray()
// Group array by key name
.reduce(function(grouped, field) {
grouped[field.name] = grouped[field.name] || [];
grouped[field.name].push(field.value);
return grouped;
}, {});
// Build query string
var queryString = $
.map(query, function(values, name) {
return name + '=' + values.join(delimiter);
})
.join('&');
// Build URL
var url = queryString ? staticUrl + '?' + queryString : staticUrl;
console.log(url);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="filter">
<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>
</form>
答案 1 :(得分：1)
您的html代码非常完美，您需要对javascript代码进行一些修改才能使其正常工作。
您还需要使用历史记录中的新查询字符串来推送更新的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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？