浅谈IE浏览器对ajax请求的结果进行缓存的问题
话不多说,先上图(谷歌浏览器)
如图选择新增部门
浏览器正常回显数据
点击左侧菜单栏用户管理组织机构部门树也正常显示
点击部门树上刷新按钮触发前台点击事件进行后台数据库查询(正常,控制台打印sql)
接下来 在IE浏览器进行测试
新增部门
新增成功
问题来了!!!
在用户管理页点击刷新按钮未发现刚才新增的部门,控制台也没有打印sql语句
接下来开始排查问题
刷新按钮对应点击事件
一开始以为是jquery版本问题导致ie浏览器不兼容click事件 多次测试发现无效
打断点在页面查看元素 发现的确是有数据返回的如图(但是仔细看数据是来自缓存的)
于是开始各种查询,终于找到ajax请求在ie浏览器缓存的问题,在默认情况下,IE会针对请求地址缓存Ajax请求的结果。也就是说,在缓存过期之前,针对相同地址发起的多个Ajax请求,只有第一次会真正发送到服务端。找到问题的关键针对问题对症下药,既然请求地址相同会把结果缓存起来,那我要是每次请求的地址都不一样呢?该怎样实现,相信很多大佬现在都已经明白如何操作了,对,没错,请求地址后加时间戳,这样就能保证每次请求的地址都不一样了
后台成功打印insert sql
接下来,在页面点击查询 看是否能显示刚才新增的部门
经验证,前台点击刷新按钮,后台成功显示查询sql且正常显示刚才新增部门,至此,IE浏览器将ajax请求内容缓存起来的问题解决
补充:网上查找相关资料,有多种针对IE浏览器缓存ajax请求的解方案,比如请求路径后加随机数Math.random()
,或者设置禁用缓存 $.ajaxSetup({cache: false});
当然还有一种暴力方式,直接修改浏览器设置即可保证每次请求都是从服务器上获取数据
感谢您的支持,如果觉得此篇文章对您有所帮助,请来波三连,感谢!