Question

我有一个页面，其中包含我想要重新加载其主要内容的过滤器列表。我试图通过使用window.history.pushState（HTML5）来每次用户更改过滤器时不断更新url的查询字符串。

这适用于第一个过滤器，当我在第一个过滤器之后添加另一个过滤器时不起作用。

这是我的代码。只要医院检查表发生变化，就会调用FilteredByHospital（）函数。

var filters = new Object();
filters.Hospitals = new Array();
function FilteredByHospital(hospitalId) {
    debugger;
    var obj = { hospitalId: hospitalId };
    filters.Hospitals.push(obj);
    var isFirstFilter = window.location.href.indexOf('?') == -1;
    var currentUrl = window.location.href;
    if (isFirstFilter) {
        window.history.pushState(filters, "Filter_" + hospitalId, currentUrl + "?hospitalIds[0]=" + hospitalId);
    } else {
        window.history.pushState((filters, "Filter_" + hospitalId, currentUrl + "&hospitalIds[" + (filters.Hospitals.length - 1) + "]=" + hospitalId));
    }
}

医院检查表（剃刀）

<div class="FilterBox">
    @foreach (var hospital in Model.Hospitals)
    {
        <input style="cursor: pointer;" type="checkbox" name="HospitalId" value="@(hospital.Value)" onchange="FilteredByHospital('@(hospital.Value)')"/><span>@(hospital.Text)</span><br/>
    }
</div>

当我选择其中一个医院复选框时，网址会正确更改为http://localhost:56195/ApplicationHealthCheck/Index?hospitalIds[0]=139961407289011，并且我的控制器操作会被点击。

当我再次为另一个复选框执行此操作时，URL保持不变，并且仅使用第一个医院ID再次点击操作。相反，网址应更改为http://localhost:56195/ApplicationHealthCheck/Index?hospitalIds[0]=139961407289011&hospitalIds[1]=26419769705609。

我做错了什么？

Answer 1

第二次pushState调用中有一对额外的括号。

代替

window.history.pushState((filters, "Filter_" + hospitalId, currentUrl + "&hospitalIds[" + (filters.Hospitals.length - 1) + "]=" + hospitalId));

与

window.history.pushState(filters, "Filter_" + hospitalId, currentUrl + "&hospitalIds[" + (filters.Hospitals.length - 1) + "]=" + hospitalId);

Answer 2

仔细查看代码的这一行：

window.history.pushState((filters, "Filter_" + hospitalId, currentUrl + "&hospitalIds[" + (filters.Hospitals.length - 1) + "]=" + hospitalId));

您是否注意到pushState((上的双括号？

在这一行中，您不使用三个参数调用pushState。您正在将comma operator应用于您的参数，然后将结果传递给pushState。您的代码将被评估为

window.history.pushState(currentUrl + "&hospitalIds[" + (filters.Hospitals.length - 1) + "]=" + hospitalId);

显然，这是不对的。

window.history.pushState第二次不工作

2 个答案: