Question

我正在一个电子商务网站上。用户可以搜索商品...假设某用户想要购买最高价格为200美元的iPhone。

query: iPhone, maxPrice: $200

现在，系统要做的是将上述查询以ajax请求的形式发送到服务器，服务器进行搜索并返回显示给用户的结果。

该方法的问题是页面内容已更新，但URL保持不变...（即url不能反映出我们正在寻找的是价格为maxPrice = $ 200的iPhone）

所以，我要做的是，一旦调用此函数，在ajax搜索完成后就更新URL：

function updateUrl() {
    var newQuery = $('#filterForm').serialize();
    var newLocation = "";

    if (window.location.protocol) {
        newLocation = window.location.protocol + "//";
    }

    newLocation += window.location.host + window.location.pathname + "?" + newQuery;
    window.history.replaceState("", "search title", newLocation);        
}

这非常完美，用户可以更改搜索条件，将新的ajax请求发送到服务器，并显示结果，并更新url以显示新的搜索条件。在此示例中，新URL如下所示： mySite/controller/action?query=iPhone&maxPrice=$200

唯一的问题是后退按钮无法正常工作……假设用户触发了查询：

查询1： mySite/controller/action?query=iPhone&maxPrice=$200

查询2： mySite/controller/action?query=samsung&maxPrice=$200

现在，如果用户按“后退”按钮，URL将更改为Query-1，但页面上显示的结果不会更新。我必须在按返回按钮后刷新页面才能显示正确的结果。

有没有比在后退按钮后刷新页面更好的方法了？

如何在Ajax调用中使用window.history

0 个答案: