我被困在这个问题上。我想在动态过滤器上创建查询字符串。现在我已经添加了过滤器类型Select your favorite sports and 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 按钮。我想在单击复选框时获取查询字符串。忘记没有按钮。谢谢
提交表格
使用过滤器参数构建和发送请求的最简单方法是将包含过滤器控件的表单提交到由表单的action属性值。如果您需要在每次更改过滤器时应用过滤器，那么只需调用.submit() https://api.jquery.com/submit/形式中的方法change事件处理程序。
序列化表单
如果您需要手动构建请求 URL，那么您可以使用.serialize() https://api.jquery.com/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 片段 https://regex101.com/r/nA9b0N/2.
请注意，正则表达式中使用了零宽度正向后断言。需要浏览器支持ES2018。
构建查询字符串形式数组
如果不可能使用零宽度正向后断言，那么您可以使用经典方法：使用以下命令将一组表单元素转换为名称和值的数组serializeArray https://api.jquery.com/serializeArray/方法，然后从数组构建查询字符串。
The serializeArray为每个控件创建一个项目。可以使用字段名称对表单值进行分组reduce https://www.w3schools.com/jsref/jsref_reduce.asp method.
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
