提交表单时页面自动刷新的相关问题及解决办法

一、前端的坑-提交表单页面自动刷新遇到的问题最近一段时间需要用到ajax局部的刷新页面，本来并不是一个复杂的功能，但是却遇到了比较大的问题，问题的具体情况是每当局部刷新之后页面就会自动刷新，然后就又回到了没有刷新前的状态，这让人感觉很坑爹啊！排查问题有问题了，当然是要首先排查代码了，看了无数次的代码，都没发现会导致页面自动刷新的情况，让人十分苦恼。然后的话，就想着难道是jquery的ht...

gxhlh

10301人浏览 · 2020-02-25 22:06:21

gxhlh · 2020-02-25 22:06:21 发布

一、前端的坑-提交表单页面自动刷新

遇到的问题

最近一段时间需要用到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>