提交表单时页面自动刷新的相关问题及解决办法 |
您所在的位置：网站首页 › submit提交数据为什么会提交两次 › 提交表单时页面自动刷新的相关问题及解决办法 |
提交表单时页面自动刷新的相关问题及解决办法
|
一、前端的坑-提交表单页面自动刷新
遇到的问题
最近一段时间需要用到ajax局部的刷新页面，本来并不是一个复杂的功能，但是却遇到了比较大的问题，问题的具体情况是每当局部刷新之后页面就会自动刷新，然后就又回到了没有刷新前的状态，这让人感觉很坑爹啊！ 排查问题有问题了，当然是要首先排查代码了，看了无数次的代码，都没发现会导致页面自动刷新的情况，让人十分苦恼。 然后的话，就想着难道是jquery的html()方法刷新页面，后来查了很久，也没有能够找出来。 无奈之下，回去看页面，发现了一个细节，原来这个地方的搜索按钮在一个表单之中，偶，万事大吉，终于找到了。原来是所使用的bootstrap的导航栏使用了表单。 $("#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("请求失败，请重试！"); } }); }); 收获这次的收获就是当你所做的东西依赖第三方的时候，一定要小心一些小的细节，小心被坑到，有时候被坑到还浑然不自知，真的是相当的伤心啊！ 然后，还有就是当表单提交的时候会刷新当前的页面，那么，如何阻止？只需要加上window.event.returnValue = false;这样的一句代码就可以万事大吉了。踩到坑真的可以让人成长的。 原文链接：https://blog.csdn.net/wangmeng951011/article/details/53121330 注意： Event.returnValue是非标准的方法。
form表单提交数据都会刷新页面 不想刷新页面 submit的时候return false然后用ajax异步 原因：个人理解的，因为当时Ajax还没诞生，同源策略（在w3c最早定义是在2005-06-13）还不存在。为了防止页面的安全性，提交数据后不能在当前页面获取到返回的数据，但是有时候又必须获取返回的数据的话，那就需要新开页面来展示数据。这也是和Ajax的本质区别。因此Ajax受同源策略限制，而form表单提交不受同源策略限制(因为当时同源策略都还没有=。=)。 三、防止表单提交时刷新页面-几种阻止 form 表单默认提交行为的方式 1、给form标签的添加表单提交事件οnsubmit="return false;"注意：onsubmit事件的作用对象为，所以把onsubmit事件加在提交按钮身上是没有效果的。 form对象的onsubmit事件类似onclick,都是先处理调用的函数，再进行表单是否跳转布尔值的判断 onsubmit="return true"为默认的表单提交事件 onsubmit="return false"为阻止表单提交事件 function change() { //动作：阻止表单数据提交 return false; } 2、JavaScript给form表单中的按钮添加单击事件οnclick="return false;" 提交 function change() { //动作：阻止表单数据提交 return false; } 3、Jquery 给form标签添加表单提交事件 $('#myForm').submit(function (event) { event.preventDefault(); return false; // 直接在事件处理程序中返回false });使用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" 5、在提交事件绑定的方法的最后 使用event.preventDefault()方法；定义和用法 preventDefault()方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。 语法 event.preventDefault() 参数描述event必需。规定阻止哪个事件的默认动作。这个 event 参数来自事件绑定函数。 $(document).ready(function(){ $("a").click(function(event){ event.preventDefault(); }); }); W3School preventDefault() 方法将防止上面的链接打开 URL。 |
【本文地址】
今日新闻 |
推荐新闻 |