我要做的是一个级联的省市区的联动下拉框,就是选择了省,然后异步读取该省的市的列表,如此类推。
=====================先粘贴我的代码============================
1.js中我是这样写的:
jQuery.ajax({
url:'ajaxGetList.do',
data:{parentId: parentId==''?'':parentId, level: level!=-1?'':'0'},
ifModified:true,
cache:true,
success:function(data){
alert('success:'+data);//to set list..........
},
contentType: 'application/json',
dataType:'json'
});
2.服务器端的响应代码:
public List<Map<String, Object>> getConcatenationList(HttpServletResponse response,@RequestHeader(required=false,value="IF-None-Match") String ifNoneMatch) {
if(ConcatenationHelper.checkEtag(RegionInfo.class, ifNoneMatch)) {
response.setStatus(304);
return null;
} else {
response.addHeader("Etag", etag);
//这里的ETAG是该请求内容的最新更新的时间戳
//TODO:(取得要显示的列表)
}
}
按上面的代码就可以使用缓存来异步获取数据了,测试时,首次点选某个省A(即第一个下拉框)时,是读取数据库的数据,取出来后能正常显示该省的市列表,点选其他省B后,再点选最初选择的省A,这个时候由于服务端返回了304状态码,这样服务端就不用再发送资源到客户端了,而直接使用cache,但这第二次选择省A的success函数中,alert显示的data却是undefined,为什么呢?是我遗漏了什么地方吗?应该怎么解决这个问题?
(P.S. 我用FireFox浏览器的,在首次点选省A时,用这个浏览器查过,确实有生成对应的缓存的,但第二次选省A时,缓存就不见了..)
可参考下面的网址:http://www.cnblogs.com/heyuquan/archive/2013/05/13/js-jquery-ajax.html
然后搜索关键字[cache和ifModified参数]
只不过那里举的例子是使用Last-Modified,而我使用ETag而已。
应该把 ifModified: true 去掉。
仔细看一下你参考的文章:
当你请求的资源并不是一层不变的时候,即不能简单的一直使用客户端缓存时,你可能通过将cache设置为false来发送请求,这实际上是在url加上时间戳组合成新的url,每次发送新的请求,这明显加大了服务器的压力。
对于这种情况,我们可以通过ifModified参数改进缓存方式(即:cache和ifModified都设置为true),……
他针对的是资源变动比较频繁的情况,希望时刻获取最新的文件,而你应该是想要尽量使用缓存吧。
正常情况下如果接收到 304,浏览器会主动把缓存内容和状态 200 返回给 xhr 对象,一旦设置了 ifModified: true,从第二次请求开始,就没有了浏览器的处理过程,jQuery 直接接收到一个 304 和空内容。
另外 contentType: 'application/json'
也用得不正确,一般情况下不用设置这个值。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。