如何确保 ajax/jquery 调用在 html 页面加载之前完成？

Question

$(function() {
    var $items = $('#items');
    $.ajax({
      type: "GET",
      url: 'some-url',
      data: {},
      success: function(items) {
        $.each(items, function(i, item){
          item_polys.push(item.polygon);
          $items.append(`<a href="somepage.html" onclick="localStorage.setItem('item', '${item.item_id}'); localStorage.setItem('item_poly', '${item.polygon}')";>${item.item_id}</a>`);
        });
        localStorage.setItem('item_polys', JSON.stringify(item_polys));
      },
      // Error handling 
      error: function (error) {
          console.log(`Error ${error}`);
      },
});

我需要 'item_polys' 保存到本地存储 ，然后 我相应的 html 页面加载。我还想找到一种方法，每次加载 html 页面后只重新加载一次，这样它就会正确填充。谢谢（很抱歉，如果这个问题已经得到解答，我在搜索时找不到我要找的东西）

Answer 1

由于您希望 ajax 请求在用户与填充元素所在的页面完全相同时发生，我认为唯一的 good 方法这样做的目的是动态创建或显示页面元素。（这可能就像打开和关闭 display: none 一样简单，但这取决于页面是什么样子以及您想要什么。）

因此，制作一个类似于 populatePage 的函数来显示页面，其中页面的默认状态是加载屏幕（或空白，或者您希望用户在请求进行时看到的任何内容） ).也许像

const populatePage = () => {
  const items = JSON.parse(localStorage.items);
  for (const item of items) {
    $items.append(`<a href="somepage.html" onclick="localStorage.setItem('item', '${item.item_id}'); localStorage.setItem('item_poly', '${item.polygon}')";>${item.item_id}</a>`);
  }
  $('main').show();
};

其中 main 是您希望在一切准备就绪时显示的容器，它具有默认隐藏它的样式。那么：

在页面加载时，检查该项目是否存在于存储中。如果是，使用它，并立即调用 populatePage。否则，让页面继续显示加载横幅或空白屏幕，发出 ajax 请求，并在完成后调用 populatePage。

$.ajax({
  // ...
  success: function (items) {
    localStorage.items = JSON.stringify(items);
    populatePage();

如何确保 ajax/jquery 调用在 html 页面加载之前完成？

How can I make sure ajax/jquery calls finish before an html page loads?

javascript

html

jquery

ajax