javascript - 如果 Ajax 请求没有完成，html 链接无法点击

Question

我的网站页面中有一个 jquery ajax 请求，每个页面都需要将此请求发布到服务器以获取状态。但它有一个问题:我在浏览器中打开页面后，在这个请求返回数据之前，我的页面所有链接都不起作用，他们无法点击。但它呈现正常。所以有人对此有解决方案吗？例如:让页面在页面加载后加载此脚本或其他。

$(function(){      
      var login_status;
      $.ajax({
        async:false,
        url:<%= url(:login_status_header_session, :from => from_uri).to_json %>,
        dataType:"html",
        success:function(data, textStatus){
          login_status = data;
        }
      });
      if(login_status) {
        $(".loginDetails p .login_status").html(login_status);
      } else {
        $(".loginWrapper").remove();
      }
  });

这是 login_status_header actin:

self.headers["Cache-Control"] = "no-cache, must-revalidate"
self.headers["Expires"] = "0" partial "session_header",
:format => "html"

Answer 1

首先，删除 async:false, 行。这样，在处理 AJAX 请求时，界面将保持响应。其次，将结果检查移至 success 函数中 - 否则它会在请求完成之前运行，因此 login_status 尚未设置(因此默认为 null ，这被视为假)。

$(function(){      
      var login_status;
      $.ajax({
        url:<%= url(:login_status_header_session, :from => from_uri).to_json %>,
        dataType:"html",
        success:function(data, textStatus){
          login_status = data;
          if(login_status) {
            $(".loginDetails p .login_status").html(login_status);
          } else {
            $(".loginWrapper").remove();
          }
        }
      });
  });