#Return刷新后同屏

Question

我正在开发一个使用 ajax 请求读取 JSON 文件的页面，我正在显示它通过循环点击但是当我刷新页面时 return 到第一个屏幕后 return 仍然是同一个屏幕我刷新请不要 JQUERY

Answer 1

这里我做了一个“框架”来维护你页面的状态。

AJAX 请求发生在 URL 中的哈希更改时（此处状态为“state1”：http://example.org/#state1）。 hashchange 事件和函数 fetshdata().

有一个事件侦听器

单击“获取数据”按钮时，哈希值将发生变化，将发生 hashchange 事件并调用函数 fetshdata()。

如果重新加载页面（这是您的问题），页面的“状态”将保留在哈希中（哈希仍在 URL 中）。为了欺骗 hashchange 事件，我“手动”创建了 hashchange 事件并将其发送到 window.

页面的状态也可以保存在 localStorage 中，但是 URL 中哈希的优点是哈希更改成为浏览器历史记录的一部分，您可以 save/send/link到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>

#Return刷新后同屏

#Return same screen after refresh

javascript

ajax

reload