如何在 JQuery AJAX 调用完成之前停止网页加载?

4

我有一个遗留的网站需求,我不能重新设计屏幕,不能使用头部no-cache标签,并且必须在用户退出并按下后退按钮后防止用户看到缓存的屏幕。

我已经接近解决方案(请参见以下代码片段)

当页面加载时,我使用JQuery AJAX函数调用Web应用程序并查看用户是否仍然登录。 如果没有,用户将被重定向到登录屏幕

<html>
<head>
 <!-- all the usual header stuff, plus links to the jQuery libaries, first script tag on page below -->

<script language = "javascript">

 $.get("/acme/confirm_authentication",function(data){
            if( data != "confirmed"){
                location.href = "logout";
            }
  }); 



</script>
</head>
<body>

blah blah blah
</body>
</html>

我不喜欢这个解决方法的一件大事是,在 JQuery 函数完成之前,我可以看到内容闪现。

有没有办法让页面在 JQuery AJAX 函数停止之前保持不加载/渲染?

谢谢


更新:答案:


我修改了下面接受的答案,以包括 "cache: false" 选项。在 Firefox 和 Chrome 中,通过后退按钮到达的页面的缓存副本将运行 .ajax(),但将使用变量 "data" 的缓存副本,这将给我一个过时的答案。

$.ajax({
 url: "/acme/confirm_authentication",
 async:false,
 cache: false,
 success: function(data) {
     if( data != "confirmed"){
         location.href = "logout";
     }
 }         

});


2
在我看来,我觉得你应该尽一切可能避免阻塞用户界面。“等待”某些内容的加载可能会破坏网站的体验,影响用户对该网站的感受。 - Dom
2
出于好奇:如果用户禁用了Javascript,他们能够在未登录的情况下访问内容吗? - Pete Scott
1
你需要在服务器上完成这个任务。 - SLaks
1
不行。我们有完整的服务器端身份验证。这是关于他们使用后退按钮查看缓存内容的问题。我无法在服务器端关闭缓存,因为我们有传统的多屏幕表单,每个屏幕都有数据,在注销后不应该被看到。在这些屏幕上设置无缓存会导致用户后退到一个空白屏幕,没有屏幕可以前进...处于死亡状态。 - Steve
就像@Jean-Philippe Bond在下面所说的,那么为什么要使用异步(ajax)调用呢?最好同步进行调用并等待响应以确定下一步操作。 - blurfus
SLaks,正如我所写的,我无法在服务器端执行此操作。我的老板希望用户在登录状态下能够使用他们的后退按钮。在头文件中设置no-cache会取消这个功能。 - Steve
1个回答

8

您可以使用ajax函数并将async属性设置为false来完成此操作。

  $.ajax({
     url: "/acme/confirm_authentication",
     success: function(data) {
         if( data != "confirmed"){
             location.href = "logout";
         }
     },
     async:false
  });

为什么要使用ajaxSetup?ajaxSetup用于设置未来Ajax请求的默认值... - Jean-Philippe Bond
ajaxSetup会影响所有未来的ajax调用(通过设置默认值),而@Jean-Philippe的版本仅在一个调用上设置async:false。根据您想要哪个答案,两个答案都可以使用。 - blurfus
我编辑了你的答案,加入了选项“cache: false”。在Firefox和Chrome浏览器中,页面的缓存副本已经缓存了变量“data”,这会导致留下错误的“confirmed”答案。选项“cache: false”强制浏览器/AJAX代码获取新的答案。非常感谢你的回答,帮助很大! - Steve
这会阻塞用户界面,没有更好的解决方案吗? - Benoit
2
另一种方法是将主页面内容设置为"display:none",直到ajax请求完成,然后设置为"display:inline"(或任何可见样式),这样您就不需要将ajax设置为同步。对于最终用户来说,除非您有一个“正在加载…”指示器可见,否则看起来是相同的。 - user2080225

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接