我正在開發一個使用 ajax 請求讀取 JSON 檔案的頁面，我通過回圈點擊來顯示它，但是當我重繪 頁面時它回傳到第一個螢屏無論如何在我重繪 后回傳相同的螢屏請不要使用 JQUERY
uj5u.com熱心網友回復：
在這里，我制作了一個“框架”來維護頁面的統計資訊。
AJAX 請求發生在 URL 中的散列更改時（這里的狀態是“state1”: http://example.org/#state1）。有一個事件監聽器hashchange和一個函式fetshdata()。
單擊“獲取資料”按鈕時，散列值將發生變化，hashchange事件將發生并fetshdata()呼叫該函式。
如果頁面被重新加載（這是你的問題），頁面的“狀態”會保留在散列中（散列仍在 URL 中）。為了欺騙hashchange事件，我“手動”制作了 hashchange 事件并將其發送到視窗上。
頁面狀態也可以在 localStorage 中維護，但 URL 中散列的優點是散列更改成為瀏覽器歷史記錄的一部分，您可以保存/發送/鏈接到 URL 等。
const data = 'data:application/json;base64,W3sidGl0bGUiOiJJdGVtIDEifSx7InRpdGxlIjoiSXRlbSAyIn0seyJ0aXRsZSI6Ikl0ZW0gMyJ9XQ==';
var content;
const fetchdata = hash => {
let url = hash; //use the hash as part of the AJAX request (not implemented)
fetch(data).then(res => res.json()).then(json => {
content.innerHTML = '';
json.forEach(item => {
content.innerHTML = `<p>${item.title}</p>`;
});
});
};
document.addEventListener('DOMContentLoaded', e => {
content = document.getElementById('content');
document.getElementById('btn_load').addEventListener('click', e => {
location.hash = 'newstate';
});
document.getElementById('btn_reload').addEventListener('click', e => {
location.reload();
});
if(location.hash){
let event = new Event('hashchange');
window.dispatchEvent(event);
}
});
window.addEventListener('hashchange', e => {
let hash = location.hash.substring(1);
fetchdata(hash);
});<button id="btn_load">Get data</button>
<button id="btn_reload">Reload</button>
<div id="content"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401853.html
標籤：javascript 阿贾克斯 重新加载