Question

我有一个菜单，其中包含一些更新div content的链接，并在加载后执行函数onSuccess。

<li>@Ajax.ActionLink("Home", "Index", "home")</li>
<li>@Ajax.ActionLink("Download", "Index", "download")</li>

如果我在网址/home上并点击下载链接，则div会成功更改。问题是URL没有改变。

如何检索请求的网址，以便我可以成功请求history.pushState？

Answer 1

从this question (How to get request url in a jQuery $.get/ajax request)我发现我可以使用this.url检索它。

从MDC window.history我找到了语法并从MDC Manipulating the browser history我发现我可以使用history.state获取当前状态（虽然似乎不适用于Chrome）并且发现当调用pushState我只能在stateObject上发送640k字符，否则会抛出异常。

我目前成功的ajax请求的方法是：

OnSuccess: function(html, status, xhr){
    var requestedUrl = this.url.replace(/[&?]X-Requested-With=XMLHttpRequest/i, "");

    // if the url is the same, replace the state
    if (window.location.href == requestedUrl)
    {
        history.replaceState({html:html}, document.title, requestedUrl);
    }
    else
    {
        history.pushState({html:html}, document.title, requestedUrl);
    }
},

对于基本测试，我将整个结果存储在stateObject上，如果它抛出异常，我将设置URL，以便能够发出新请求。

我的popstate事件是

$(window).bind("popstate", function (e) {
    var state = e.originalEvent.state;
    $("#body").html(state.html);
});

它恢复以前的页面，我不需要提出新的请求。

Answer 2

我能想到实现这一目标的唯一方法是使用jQuery来处理链接的click事件。因此，您可以按如下方式向链接添加类属性;

@Ajax.ActionLink("Home", "Index", "home", new { @class = "menuLinks" })

添加点击事件;

$(".menuLinks").click(function() {
   history.pushState(stateObj, $(this).html, $(this).attr("href"));
}

不太熟悉pushState签名，但我相信使用'a'标记的href将作为有效的url传递给pushState。

如何在ajax请求后更改URL？

2 个答案: