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

问题集锦 专栏收录该内容
40 篇文章 2 订阅

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

遇到的问题

最近一段时间需要用到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>
  • 4
    点赞
  • 0
    评论
  • 9
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值