在 Ajax 调用中更改 URL 的问题答案

【问题标题】：Issue with changing the URL in the Ajax call在 Ajax 调用中更改 URL 的问题
【发布时间】：2015-12-17 11:46:37
【问题描述】：

我有一个关于分页概念的休息服务电话。现在在点击下一个按钮/图标的分页概念中，我可以调用其余服务，它返回所需的值但 URL 没有改变，我需要更改 URL 中的页码。我的代码是下一个图标事件如下，'

function nextPage(currentPage, totalPageCount) {
            alert(currentPage+ " Begin nextPage Method " + totalPageCount);
            var nextPage = currentPage+1;
            var ctx = "${context}";
            var url = ctx+"/adtrack/storelist/National/1/"+nextPage;
            console.log(url);
            if(nextPage  <= totalPageCount)
                {
                jQuery.ajax({
                   url: url,
                   type: "GET",
                   success: function(msg) {
                    alert("Success");
                   },
                   error : function(msg) {
                     alert("Fail");
                   }
                  });
                }
            else{
                alert("Unable to perform the action!!!");
            }
            // return true or false, depending on whether you want to allow the `href` property to follow through or not
        }

在上面的调用中，它会点击 URL 并返回值，但我还需要将当前 URL 更改为最新 URL。如何更新网址？

无论我点击哪个网址，都必须将其更新为浏览器当前网址

【问题讨论】：

尝试使用 window.location.href = "to _your url";

标签： javascript jquery ajax url

【解决方案1】：

您好，我的建议是尝试将 nextPage 变量声明为全局变量，因为每当您点击该函数时，都会将新值分配给该 nextPage 变量。所以也尝试一下

     var nextPage=0;

function nextPage(currentPage, totalPageCount) {
      /......../

      nextPage= currentPage+1;

     /......../

}

【讨论】：

【解决方案2】：

你应该使用 History API，它允许主推浏览器历史记录。

function nextPage(currentPage, totalPageCount) {
            alert(currentPage+ " Begin nextPage Method " + totalPageCount);
            var nextPage = currentPage+1;
            var ctx = "${context}";
            var url = ctx+"/adtrack/storelist/National/1/"+nextPage;
            console.log(url);
            if(nextPage  <= totalPageCount)
                {
                jQuery.ajax({
                   url: url,
                   type: "GET",
                   success: function(msg) {
                    alert("Success");
                    /* History API goes below, replace /testurl with the string you want */
                    window.history.pushState(null, null, '/testurl');
                   },
                   error : function(msg) {
                     alert("Fail");
                   }
                  });
                }
            else{
                alert("Unable to perform the action!!!");
            }
            // return true or false, depending on whether you want to allow the `href` property to follow through or not
        }

请记住，一些较旧的浏览器可能不支持它

http://caniuse.com/#feat=history

在此处了解有关历史 API 的更多信息

https://css-tricks.com/using-the-html5-history-api/

https://developer.mozilla.org/en-US/docs/Web/API/History_API

【讨论】：

【解决方案3】：

以下代码将保持页面不刷新，只是更改 url。

 history.pushState({id: '<SOME-ID>'}, '', 'newUrl');

更多信息，请参考https://rosspenman.com/pushstate-jquery/

【讨论】：