根据使用 jquery/javascript 选择的复选框更新 url 而无需重新加载

Question

这是一个两部分的问题：

我有 2 个带有复选框的部分。

1. 我需要根据选中的复选框更新网址
2. 我需要分享更新后的网址，该网址会在页面加载时打开并选择特定的复选框

我做了一个 jsfiddle，里面有 html 代码：https://jsfiddle.net/yh2ugbj8/5/

<h3>Filter recepies:</h3>

<div>
<p>Select vegetables</p>
<label><input type="checkbox" id="cbox1" value="potato"> Potato</label><br>
<label><input type="checkbox" id="cbox2" value="onion"> Onion</label><br>
<label><input type="checkbox" id="cbox3" value="tomato"> Tomato</label><br>
</div>

<div>
<p>Select seasoning</p>
<label><input type="checkbox" id="cbox1" value="salt"> Salt</label><br>
<label><input type="checkbox" id="cbox2" value="pepper"> Pepper</label><br>
<label><input type="checkbox" id="cbox3" value="chilli"> Chilli Flakes</label><br>
</div>

Answer 1

我建议使用location.hash，这样您就可以在不离开页面的情况下将额外信息添加到 url。此信息也可以在链接中提供，以便您在首次导航到页面时检查所选元素...

HTML

<h3>Filter recepies:</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>

Javascript

$(function() {

    $(".vegetables, .seasoning").on("change", function() {
        var hash = $(".vegetables:checked, .seasoning:checked").map(function() {
            return this.value;
        }).toArray();
        hash = hash.join("|");
        location.hash = hash;
        alert(hash);
    });

    if (location.hash !== "") {
        var hash = location.hash.substr(1).split("|");
        hash.forEach(function(value) {
            $("input[value=" + value + "]").prop("checked", true);
        });
    }
});

这是一个更新的小提琴，其中页面 url 将值添加到哈希中......

https://jsfiddle.net/yh2ugbj8/6/

如您所见，我在脚本顶部添加了一行来模拟访问附加了哈希值的页面。

我还删除了 ID 并在复选框中添加了类，只是为了不制作丑陋的 jQuery 选择器。

注意：我添加了警报以显示位置，因为您不会看到更改 url 的小提琴示例，因为 4 个面板都是 iframe。

Answer 2

您可以使用history.js，它使您能够使用 History api 在现代浏览器中更改 url 而无需回发。您可以更深入地了解 api，但是您应该记住的最重要的一点是，pushstate 和 replacestate 的行为不同。 示例脚本可以是；

$('[type="checkbox"]').on('change', function(){
  var checkedVals = $(':checked').map(function(){ return $(this).val(); }).get().join();
  alert(checkedVals); //for debugging purposes
  History.pushState(null, null, "?state=" + checkedVals);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Filter recepies:</h3>

<div>
<p>Select vegetables</p>
<label><input type="checkbox" id="cbox1" value="potato"> Potato</label><br>
<label><input type="checkbox" id="cbox2" value="onion"> Onion</label><br>
<label><input type="checkbox" id="cbox3" value="tomato"> Tomato</label><br>
</div>

<div>
<p>Select seasoning</p>
<label><input type="checkbox" id="cbox1" value="salt"> Salt</label><br>
<label><input type="checkbox" id="cbox2" value="pepper"> Pepper</label><br>
<label><input type="checkbox" id="cbox3" value="chilli"> Chilli Flakes</label><br>
</div>

Answer 3

这可以通过多种方式来实现，但如果要求没有页面重新加载 HTML5 历史记录将是您最好的选择。

1) 按照 cmets 中的建议，创建一个具有动态网段的路由器。这里有几个不错的路由库：

• https://visionmedia.github.io/page.js/
• http://backbonejs.org/#Router
• （如果你用谷歌搜索，还有更多）

2) 在初始页面加载时，确保正确选择了与当前路由中的动态段相对应的 ui 元素。或者让您的服务器在渲染时加载正确的 ui 元素。你说使用 jquery，所以我假设这是在所有客户端完成的。

3) 为复选框设置监听器，使用您的路由库更新选择和取消选择时的 url。

• 示例：https://api.jquery.com/change/

4) 与网络上的大多数事物一样，没有一种“正确”的做事方式。这可以使用查询字符串或动态段来完成。在您给定的时间和您的团队经历的时间内，您可以按照自己感觉最舒服的方式实施它们，这取决于您。