本文将详细介绍如何使用 JavaScript 在不刷新页面的情况下，通过复选框的选择动态更新 URL 参数。我们将探讨如何利用 window.history.pushState() 方法，将选中的复选框值添加到 URL 的 ?filter= 参数中，从而实现更友好的用户体验和更灵活的页面状态管理。
使用 pushState() 更新 URL 参数
在 Web 开发中，经常需要根据用户的交互动态地改变 URL，例如，根据用户选择的筛选条件更新 URL 参数。传统的做法是直接修改 location.href，但这会导致页面重新加载，影响用户体验。更好的方式是使用 window.history.pushState() 方法，它可以在不刷新页面的情况下修改 URL。
以下是一个示例，演示如何使用 pushState() 根据复选框的选择更新 URL 中的 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(',')}`);
});
// 初始化时，如果URL中存在filter参数，则选中对应的checkbox
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);
});
}
});在这个示例中，我们监听了类名为 vegetables 和 seasoning 的复选框的 change 事件。当复选框的状态发生改变时，我们首先使用 jQuery 的 map() 方法获取所有被选中的复选框的值，然后使用 join(',') 方法将这些值连接成一个字符串，用逗号分隔。最后，我们使用 window.history.pushState() 方法更新 URL。
立即学习“Java免费学习笔记（深入）”；
pushState() 方法接受三个参数：
- state: 一个与新 URL 关联的状态对象。可以为 null。
- title: 新页面的标题。大多数浏览器会忽略此参数，建议设置为空字符串。
- url: 新的 URL。
在这个例子中，我们将 state 设置为 {} (空对象)，title 设置为空字符串 ''，url 设置为 ?filter=${values.join(',')}，其中 ${values.join(',')} 是一个模板字符串，用于将选中的复选框值插入到 URL 中。
此外，代码还包含了一段初始化逻辑，用于在页面加载时，如果 URL 中存在 filter 参数，则自动选中对应的复选框。这通过 URLSearchParams API 解析 URL 中的查询字符串，并使用 split(',') 方法将 filter 参数的值分割成数组，然后遍历数组，选中对应的复选框。
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>
注意事项:
- pushState() 方法不会触发页面重新加载，因此需要在代码中手动处理 URL 改变后的逻辑，例如，根据 filter 参数的值过滤数据。
- pushState() 方法只能修改 URL 的路径部分和查询字符串部分，不能修改 URL 的域名部分。
- 为了兼容旧版本的浏览器，可以使用 hashchange 事件监听 URL 的 hash 部分的变化，并根据 hash 值更新页面内容。
- 使用 URLSearchParams API 可以更方便地解析和修改 URL 中的查询字符串。
总结:
window.history.pushState() 方法是一个强大的工具，可以用来在不刷新页面的情况下修改 URL。通过结合 pushState() 方法和 URLSearchParams API，可以实现更灵活的页面状态管理和更友好的用户体验。在实际开发中，需要根据具体的需求选择合适的方法来更新 URL，并注意处理 URL 改变后的逻辑。
