本文旨在指导开发者如何使用 JavaScript 在不刷新页面的情况下，通过复选框的选择动态更新 URL 参数。我们将介绍如何利用 window.history.pushState() 方法，将选中的复选框值作为查询参数添加到 URL 中，从而实现更清晰、更友好的 URL结构，避免使用哈希值。
使用 pushState() 更新 URL 参数
当需要根据用户在网页上的操作（例如，复选框的选择）动态更新 URL，并且不希望刷新整个页面时，window.history.pushState() 方法是一个强大的工具。 它允许你修改浏览器的历史记录，从而改变 URL，而无需重新加载页面。
以下是如何使用 pushState() 实现根据复选框选择更新 ?filter= 参数的示例代码：
$(function() {
$(".vegetables, .seasoning").on("change", function() {
var values = $(".vegetables:checked, .seasoning:checked").map((i, el) => el.value).get();
window.history.pushState({}, '', `?filter=${values.join(',')}`);
});
});代码解释：
立即学习“Java免费学习笔记（深入）”；
- 事件监听： .vegetables, .seasoning 选择器用于选取所有 vegetables 和 seasoning 类的元素，.on("change", function() { ... }) 为这些元素绑定 change 事件监听器。 当复选框的状态发生改变时，绑定的函数会被触发。
- 获取选中的值： $(".vegetables:checked, .seasoning:checked") 选取所有被选中的 vegetables 和 seasoning 类的元素。.map((i, el) => el.value).get() 使用 .map() 方法遍历选中的元素，提取每个元素的 value 属性，并使用 .get() 方法将 jQuery 对象转换为 JavaScript 数组。
- 构建新的 URL： `?filter=${values.join(',')}` 使用模板字符串构建新的 URL 查询参数。values.join(',') 将数组中的值用逗号连接成一个字符串。
-
更新 URL： window.history.pushState({}, '', ...) 使用 pushState() 方法更新 URL。
- 第一个参数 {} 是一个状态对象，可以用来存储与此 URL 关联的数据，这里我们传入一个空对象。
- 第二个参数 '' 是页面标题，可以为空字符串。
- 第三个参数是要更新的 URL，这里我们传入包含 ?filter= 参数的新 URL。
HTML 结构：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <h3>Filter recipes:</h3> <div> <p>Select vegetables</p> <label><input type="checkbox" class="vegetables" value="potato"> Potato</label><br> <label><input type="checkbox" class="vegetables" value="onion"> Onion</label><br> <label><input type="checkbox" class="vegetables" value="tomato"> Tomato</label><br> </div> <div> <p>Select seasoning</p> <label><input type="checkbox" class="seasoning" value="salt"> Salt</label><br> <label><input type="checkbox" class="seasoning" value="pepper"> Pepper</label><br> <label><input type="checkbox" class="seasoning" value="chilli"> Chilli Flakes</label><br> </div>
首次加载时读取 URL 参数
如果需要在页面首次加载时，根据 URL 中的 filter 参数来设置复选框的选中状态，可以使用以下代码：
$(function() {
// ... (之前的代码)
// 页面加载时读取 URL 参数
const urlParams = new URLSearchParams(window.location.search);
const filterValues = urlParams.get('filter');
if (filterValues) {
const values = filterValues.split(',');
values.forEach(value => {
$("input[value='" + value + "']").prop('checked', true);
});
}
});代码解释：
立即学习“Java免费学习笔记（深入）”；
- 获取 URL 参数： new URLSearchParams(window.location.search) 创建一个 URLSearchParams 对象，用于解析 URL 查询字符串。window.location.search 获取 URL 中 ? 之后的部分。
- 获取 filter 参数的值： urlParams.get('filter') 获取名为 filter 的参数的值。
- 设置复选框的选中状态： 如果 filterValues 存在，则将其按逗号分割成数组，并遍历数组，找到对应的复选框，并将其 checked 属性设置为 true。
注意事项
- URL 长度限制： 不同的浏览器和服务器对 URL 的长度有限制。 如果选择的复选框过多，导致 URL 过长，可能会出现问题。 可以考虑使用 POST 请求或者将数据存储在本地存储中来解决这个问题.
- 编码： 如果 value 属性包含特殊字符，需要进行 URL 编码，以确保 URL 的正确性。可以使用 encodeURIComponent() 函数进行编码。
- 兼容性： window.history.pushState 方法在较老的浏览器中可能不支持。 可以使用 polyfill 来提供兼容性支持。
- 安全性： 避免直接将 URL 参数用于服务器端查询，以防止 SQL 注入等安全问题。
总结
使用 window.history.pushState() 方法可以方便地在不刷新页面的情况下更新 URL 参数，从而实现更友好的用户体验。 通过结合事件监听、URL 解析和 DOM 操作，可以灵活地根据用户的操作动态更新 URL，并保持页面状态。 在实际应用中，需要注意 URL 长度限制、编码和兼容性等问题，并采取必要的安全措施。
