问题描述

有两个页面，分别为layout.html和welcome.html，在layout.html中引用了jquery.js，在welcome.html页面中也引用了jquery.js，通过$(“#divId”).load(welcome.html)方法加载welcome页面，当执行load方法时，使用fiddler进行抓包时，发现welcome.html中的jquery在页面加载时后面被加上了随机数。按照我的想法，jquery.js既然加载了一次，welcome.html中应该从浏览器的缓存中加载，不应该重新从服务器请求。

原因

JQuery在使用load方法加载页面时，会在目标页面的资源（包括js，css）后面加上一个随机数，来重新加载目标页面中的资源，以确保所有请求的资源是最新的，并且能够单独使用。

如何解决

  • 只引用一份相同的js脚本，如在layout.html中引用jquery.js，welcome.html中不引用jquery.js。但是这样会给我们的调试带来不便，当我们单独调试welcome.html页面时，因为缺少脚本，就不能正常运行了。
  • 通过JQuery的ajaxSetup来设置缓存。方法如下：
1
$.ajaxSetup({cache:true});

设置了cache为true后，会出现ajax请求数据也发现缓存的问题，这时可以在ajax的请求中添加随机数来解决这个问题。如下代码：

1
2
3
4
5
6
7
$.ajax({
	type:'get',
	url:'http://mydomain.com/welcome.html?r='+Math.random(),
	success: function(){
		console.log('success')
	}
});