一、前端的坑-提交表单页面自动刷新
遇到的问题
最近一段时间需要用到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;
这样的一句代码就可以万事大吉了。踩到坑真的可以让人成长的。
原文链接:https://blog.csdn.net/wangmeng951011/article/details/53121330
注意: Event.returnValue
是非标准的方法。
二、form表单提交时都会自动刷新页面吗?为什么?
form表单提交数据都会刷新页面
不想刷新页面 submit的时候return false然后用ajax异步
原因:个人理解的,因为当时Ajax还没诞生,同源策略(在w3c最早定义是在2005-06-13)还不存在。为了防止页面的安全性,提交数据后不能在当前页面获取到返回的数据,但是有时候又必须获取返回的数据的话,那就需要新开页面来展示数据。这也是和Ajax的本质区别。因此Ajax受同源策略限制,而form表单提交不受同源策略限制(因为当时同源策略都还没有=。=)。
三、防止表单提交时刷新页面-几种阻止 form 表单默认提交行为的方式
1、给form标签的添加表单提交事件οnsubmit="return false;"
注意:onsubmit
事件的作用对象为<form>
,所以把onsubmit
事件加在提交按钮身上是没有效果的。
form
对象的onsubmit
事件类似onclick
,都是先处理调用的函数,再进行表单是否跳转布尔值的判断
onsubmit="return true"
为默认的表单提交事件
onsubmit="return false"
为阻止表单提交事件
<form οnsubmit="return change()" id="myForm" method="POST" class="form-horizontal" role="form">
</form>
<script>
function change() {
//动作:阻止表单数据提交
return false;
}
</script>
2、JavaScript给form表单中的按钮添加单击事件οnclick="return false;"
<form οnsubmit="" id="myForm" method="POST" class="form-horizontal" role="form">
<button class="btn btn-primary" type="submit" οnclick="return change();">提交</button>
</form>
<script>
function change() {
//动作:阻止表单数据提交 return false;
}
</script>
3、Jquery 给form标签添加表单提交事件
<form id="myForm" method="POST" class="form-horizontal" role="form">
</form>
<script>
$('#myForm').submit(function (event) {
event.preventDefault();
return false;
// 直接在事件处理程序中返回false
});
</script>
使用ajax 不想刷新页面 submit的时候return false
$('#modifyForm').on('submit', function () {
$.ajax({
url: '/users/password',
type: 'put',
data: formData,
success: function () { },
error:function(){ }
})
// 阻止表单默认提交的行为
return false;
});
4、规定button的类型为button,使用click事件触发,逻辑后手动提交;
使用button 按钮提交表单的时候,设置 type="button"
button在浏览器中默认的类型为submit
或使用input
代替button
,设置type="button"
<button> </button>
<input type="button"/>
5、在提交事件绑定的方法的最后 使用event.preventDefault()
方法;
定义和用法
preventDefault()
方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。
语法
event.preventDefault()
参数 | 描述 |
---|---|
event | 必需。规定阻止哪个事件的默认动作。这个 event 参数来自事件绑定函数。 |
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://w3school.com.cn/">W3School</a>
<p>preventDefault() 方法将防止上面的链接打开 URL。</p>
</body>
</html>