使用 JavaScript 更新 URL 参数，无需哈希值

本文旨在指导开发者如何使用 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免费学习笔记（深入）”；

1. 事件监听： .vegetables, .seasoning 选择器用于选取所有 vegetables 和 seasoning 类的元素，.on("change", function() { ... }) 为这些元素绑定 change 事件监听器。 当复选框的状态发生改变时，绑定的函数会被触发。
2. 获取选中的值： $(".vegetables:checked, .seasoning:checked") 选取所有被选中的 vegetables 和 seasoning 类的元素。.map((i, el) => el.value).get() 使用 .map() 方法遍历选中的元素，提取每个元素的 value 属性，并使用 .get() 方法将 jQuery 对象转换为 JavaScript 数组。
3. 构建新的 URL： `?filter=${values.join(',')}` 使用模板字符串构建新的 URL 查询参数。values.join(',') 将数组中的值用逗号连接成一个字符串。
4. 更新 URL： window.history.pushState({}, '', ...) 使用 pushState() 方法更新 URL。
   • 第一个参数 {} 是一个状态对象，可以用来存储与此 URL 关联的数据，这里我们传入一个空对象。
   • 第二个参数 '' 是页面标题，可以为空字符串。
   • 第三个参数是要更新的 URL，这里我们传入包含 ?filter= 参数的新 URL。

HTML 结构：

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

0

查看详情

<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免费学习笔记（深入）”；

1. 获取 URL 参数： new URLSearchParams(window.location.search) 创建一个 URLSearchParams 对象，用于解析 URL 查询字符串。window.location.search 获取 URL 中 ? 之后的部分。
2. 获取 filter 参数的值： urlParams.get('filter') 获取名为 filter 的参数的值。
3. 设置复选框的选中状态： 如果 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 长度限制、编码和兼容性等问题，并采取必要的安全措施。

以上就是使用 JavaScript 更新 URL 参数，无需哈希值的详细内容，更多请关注php中文网其它相关文章！