IE针对Ajax请求结果的缓存/ IE浏览器同一个请求第二次是缓存

最新推荐文章于 2020-05-18 11:32:28 发布

排码的小拇指

最新推荐文章于 2020-05-18 11:32:28 发布

阅读量700

点赞数

分类专栏： js 文章标签： IE缓存 Ajax请求结果缓存

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何解决IE浏览器中Ajax请求结果被缓存的问题。提供了三种解决方案：直接设置cache为false；通过为URL添加时间戳参数；使用$.ajaxSetup全局禁用缓存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

IE针对Ajax请求结果的缓存/ IE浏览器同一个请求第二次是缓存

一.在AJAX请求的属性上直接设置cache

function getSetServer (selectIDs) {
   $.ajax({
       url:'/kl_eas/v1/monitor/servers?'+ new Date().toTimeString() ,

       method:'get',
       async: false,
       cache:false,//这行去缓存,cache只有GET方式的时候有效。
       dataType:'json',
       error: function (data) {
           console.log(data);

       },
       success:function (data){
           console.log(data )
           bindData(data,selectIDs)
       }
   });

}

二、通过为URL地址添加后缀的方式解决问题
由于IE针对Ajax请求的返回的结果是根据请求地址进行缓存的，所以如果不希望这个缓存机制生效，我们可以在每次请求时为请求地址添加不同的后缀来解决这个问题。针对这个例子，我们通过如下的代码为请求地址添加一个基于当前时间的查询字符串，再次运行程序后IE中将会显示实时的时间。

    <!DOCTYPE html>
   <html>
      <head>        
       <script type="text/javascript">
         $(function () {
              window.setInterval(function () {
                        $.ajax({
                           url:'@Url.Action("GetCurrentTime")?'+ new Date().toTimeString() ,
                            success: function (result) {
                              $("ul").append("<li>" + result + "</li>");
                           }
                       });
                  }, 5000);
              });
          </script>
      </head>
  </html>

三、通过jQuery的Ajax设置解决问题
实际上jQuery具有针对这个的Ajax设置，我们只需要按照如下的方式调用$.ajaxSetup方法禁止掉Ajaz的缓存机制。

   <!DOCTYPE html>
   <html>
     <head>        
           <script type="text/javascript">
               $(function () {
                   $.ajaxSetup({ cache: false }); //这行
                   window.setInterval(function () {
                       $.ajax({
                           url:'@Url.Action("GetCurrentTime")',
                          success: function (result) {
                               $("ul").append("<li>" + result + "</li>");
                        }
                      });
                   }, 5000);
               });
           </script>
      </head>
   </html>