遇到的问题
最近一段时间需要用到jsp加上ajax局部的刷新页面,本来并不是一个比较复杂的功能,但是却遇到了比较大的问题,问题的具体情况是每当局部刷新之后页面就会自动刷新,然后就又回到了没有刷新前的状态,这让人感觉很坑爹啊!
排查问题
有问题了,当然是要首先排查代码了,看了无数次的代码,都没发现会导致页面自动刷新的情况,让人十分苦恼。
然后的话,就想着难道是jquery的html()方法刷新页面,后来查了很久,也没有能够找出来。
无奈之下,回去看页面,发现了一个细节,原来这个地方的搜索按钮在一个表单之中,偶,万事大吉,终于找到了。原来是所使用的bootstrap的导航栏使用了表单。
<script language="javascript" type="text/javascript">
$("#search").click(function() {
$.ajax({
type : "POST",
url : "/ajaxsearch/零食",
async : false,
data : {},
dataType : "html",
timeout : 1000,
success : function(dates) {
$("#mainContent").html(dates);
window.event.returnValue = false;
},
error : function() {
console.log("请求失败,请重试!");
}
});
});
</script>
收获
这次的收获就是当你所做的东西依赖第三方的时候,一定要小心一些小的细节,小心被坑到,有时候被坑到还浑然不自知,真的是相当的伤心啊!
然后,还有就是当表单提交的时候会刷新当前的页面,那么,如何阻止?只需要加上window.event.returnValue = false;
这样的一句代码就可以万事大吉了。踩到坑真的可以让人成长的。