jQuery将多个filter参数添加到url
我有多组复选框，用于过滤搜索结果。 例如，搜索衬衫会将第一组作为颜色，其中包括黑色，蓝色，红色和第二组等大小，其中包括小，中，大等。 标准的东西……
在进行搜索后，此示例的URL将如下所示，并应用filter：
www.xzy.dev/search?keywords=shirt&colors=red,black&sizes=small,medium 这将返回与关键字搜索匹配的所有项目，包括颜色（红色和黑色）和大小（中小）的filter。
我已经完成了所有的后端，但是当涉及到事情的前端时我并不是很伟大……
下面的代码只是关于我想要的东西，除了它有我的情况的缺陷，我已在下面解释。
function GetFilters() { console.log("rom"); $('input[type="checkbox"]').on('change', function (e) { var data = {}, fdata = [], loc = $('', { href: window.location })[0]; $('input[type="checkbox"]').each(function (i) { if (this.checked) { if (!data.hasOwnProperty(this.name)) { data[this.name] = []; } data[this.name].push(this.value); } }); // get the key var key = Object.keys(data)[0]; // and the data // it works to without joining var fdata = key+"="+data[key].join(','); // and if you wanna strip the whitespaces // use fdata = fdata.replace(/\s/g,""); $.ajax({ type: "POST", url: "/ajax/get", data: { "_token": "{{ csrf_token() }}", "fdata": fdata }, success: function (response) { $('#d2d-results').html(response); } }); if (history.pushState) { history.pushState(null, null, loc.pathname + '?' + fdata); } }); } window.onload = GetFilters;
该代码大部分都适用。 当我单击一个复选框时，它会附加到url并完成ajax请求。 效果很好……
但我对所述代码的问题是，当我取消选中最后一个复选框以删除最终filter时，它会保留在url中，并转换错误：
Uncaught TypeError: Cannot read property 'join' of undefined at HTMLInputElement. (677) at HTMLInputElement.dispatch (jquery.min.js:3) at HTMLInputElement.q.handle (jquery.min.js:3)
其次，代码仅在我使用一个filter组时才有效。 如果我尝试从另一个filter组中单击一个复选框，同时已经从第一个filter组中选择了一个选项，例如，如果colors = red，则已经选择了black，则事情会失败，并且由于显而易见的原因，因为代码似乎不允许它。
如何修改它以添加多个查询组？ 如何从我的颜色组中点击红色和黑色，从我的尺寸组中点击中小，并显示url：
www.xzy.dev/search?keywords=shirt&colors=red,black&sizes=small,medium
但是如果我不想指定颜色，还要删除实际的查询？
www.xzy.dev/search?keywords=shirt&sizes=small,medium
我认为你的问题是你总是只获得一个密钥（如果它不存在则存在，那么代码就会因为未定义而中断）。
你应该迭代所有的键，这样你就可以安全了，如果你没有键 – fdata将保持空白。