溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下history如何解決ajax出現的問題，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
H5增加了一個事件window.onpopstate，當用戶點擊那兩個按鈕就會觸 發這個事件。但是光檢測到這個事件是不夠的，還得能夠傳些參數，也就是說返回到之前那個頁面的時候得知道那個頁面的pageIndex。通過 history的pushState方法可以做到，pushState(pageIndex)將當前頁的pageIndex存起來，再返回到這個 頁面時獲取到這個pageIndex。
window.history.pushState描述：
window.history.pushState(state, title, url);
state對象：是一個JavaScript對象，它關系到由pushState()方法創建出來的新的history實體。用以存儲關于你所要插入到歷史 記錄的條目的相關信息。State對象可以是任何Json字符串。因為firefox會使用用戶的硬盤來存取state對象，這個對象的最大存儲空間為640k。如果大于這個數 值，則pushState()方法會拋出一個異常。
title：firefox現在回忽略這個參數，雖然它可能將來會被使用上。而現在最安全的使用方式是傳一個空字符串，以防止將來的修改。
url：用來傳遞新的history實體的URL，瀏覽器將不會在調用pushState()方法后加載這個URL。也許會過一會嘗試加載這個URL。比如在用戶重啟了瀏覽器后，新的url可以不是絕對路徑。如果是相對路徑，那么它會相對于現有的url。新的url必須和現有的url同域，否則pushState()將拋出異常。這個參數是選填的，如果為空，則會被置為document當前的url。
直接貼代碼：
( loadData= pageIndex:window.history.state===?1 init: .getData( getData: that= type:'post' url:'./data/getMovices'+pageIndex+'.json' dataType:'json' async: success: renderDom: bookHtml= "<table>"+ "<tr>"+ "<th>電影</th>>"+ "<th>導演</th>"+ "<th>上映時間</th>"+ "</tr>" ( i=0;i<movies.length;i++ bookHtml += "<tr>" + " <td>" + movies[i].moviesName + "</td>" + " <td><a>" + movies[i].moviesEditor + "</a></td>" + " <td>" + movies[i].times + "</td>" + "</tr>" bookHtml+="</table>" bookHtml += "<button>上一頁</button>" + "<button class='nextPage'>下一頁</button>" $('body' nextPage: that= $(document).on("click",".nextPage", that.pageIndex++ window.history.pushState({page:that.pageIndex}, window.addEventListener("popstate", page=0 (event.state!== page= console.log('page:'+ console.log('page:'+ loadData.pageIndex= })(jQuery,window,undefined);通過直接在html頁面調用js文件就可看到運行結果。
這樣就可以達到通過ajax進行交互也能實現監聽前進/后臺/刷新的功能了。
附瀏覽器兼容性：
看完了這篇文章，相信你對history如何解決ajax出現的問題有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
