广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >如何解决Ajax提交Form表单页面仍会刷新的问题
  • 921
分享到

如何解决Ajax提交Form表单页面仍会刷新的问题

2024-04-02 19:04:59 921人浏览 泡泡鱼
摘要

小编给大家分享一下如何解决ajax提交FORM表单页面仍会刷新的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!搞了半天原来点

小编给大家分享一下如何解决ajax提交FORM表单页面仍会刷新的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

搞了半天原来点击提交按钮 少加了个type="button"  原来是  <form >  <button id="sub" />   </form>  结果怎么弄都会刷新页面,加上就好了

 PS:form 表单中存在button时ajax提交后自动刷新问题

//在记一个坑(刚学前台,不是很懂,项目中自己给自己挖了个坑,哈哈...)
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">修改资料名称:</label>
<div class="col-sm-7"> <input type="text" placeholder="test22" class="form-control"></div>
<div class="col-sm-2">
<button class="btn btn-primary" onclick="resetCertificateName(14)">修改</button>
</div>
</div>
</form>

当form中存在button标签时,用ajax异步提交表单后,也面会被刷新。(感觉很诡异)

原因:button 存在时会再次提交一下表单,所以页面被刷新了。(之前认为button type='submit' 时)button才有提交表单的功能。

解决:button标签换成a标签就可以了。<a class="btn btn-primary" onclick="resetCertificateName(14)">修改</a>

以上是“如何解决Ajax提交Form表单页面仍会刷新的问题”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网VUE频道!

--结束END--

本文标题: 如何解决Ajax提交Form表单页面仍会刷新的问题

本文链接: https://www.lsjlt.com/news/79898.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何解决Ajax提交Form表单页面仍会刷新的问题
    小编给大家分享一下如何解决Ajax提交Form表单页面仍会刷新的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!搞了半天原来点...
    99+
    2022-10-19
  • vue如何解决form表单提交但不跳转页面的问题
    这篇文章将为大家详细讲解有关vue如何解决form表单提交但不跳转页面的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。vue使用@submit.prevent=&qu...
    99+
    2022-10-19
  • 如何解决ajax中提交数据到后台jsp页面及页面跳转问题
    这篇文章主要为大家展示了“如何解决ajax中提交数据到后台jsp页面及页面跳转问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决ajax中提交数据到后台...
    99+
    2022-10-19
  • 如何解决页面刷新vuex数据消失的问题
    这篇文章主要为大家展示了“如何解决页面刷新vuex数据消失的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决页面刷新vuex数据消失的问题”这篇文章吧...
    99+
    2022-10-19
  • 如何解决Vue路由this.route.push跳转页面不刷新的问题
    这篇文章主要讲解了“如何解决Vue路由this.route.push跳转页面不刷新的问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何解决Vue路由this.route.push跳转页面...
    99+
    2023-06-20
  • vue表单为空也能提交的问题如何解决
    这篇文章主要讲解了“vue表单为空也能提交的问题如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue表单为空也能提交的问题如何解决”吧!vue表单为空也能提交今天在用Vue写表单验证...
    99+
    2023-06-30
  • 如何解决刷新页面vuex数据不消失和不跳转页面的问题
    小编给大家分享一下如何解决刷新页面vuex数据不消失和不跳转页面的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!先说点什么v...
    99+
    2022-10-19
  • 如何解决vue路由变化页面数据不刷新的问题
    这篇文章给大家分享的是有关如何解决vue路由变化页面数据不刷新的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我...
    99+
    2022-10-19
  • redis分布式锁如何解决表单重复提交的问题
    本篇文章为大家展示了redis分布式锁如何解决表单重复提交的问题,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。假如用户的网速慢,用户点击提交按钮,却因为网速慢,而没有跳转到新的页面,这时的用户会再次...
    99+
    2023-06-21
  • 如何解决vue+element键盘回车事件导致页面刷新的问题
    这篇文章将为大家详细讲解有关如何解决vue+element键盘回车事件导致页面刷新的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。背景今天发现输入框输入内容后回车就会...
    99+
    2022-10-19
  • 如何解决IE11 vue+webpack项目中数据更新后页面没有刷新的问题
    这篇文章主要介绍如何解决IE11 vue+webpack项目中数据更新后页面没有刷新的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!vue +webpack 项目中数据更新后页面...
    99+
    2022-10-19
  • 如何使用sessionStorage解决vuex在页面刷新后数据被清除的问题
    这篇文章主要介绍如何使用sessionStorage解决vuex在页面刷新后数据被清除的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.原因2.解决方法localStorage...
    99+
    2022-10-19
  • 如何解决angular2中router路由跳转navigate的使用与刷新页面问题
    这篇文章主要介绍如何解决angular2中router路由跳转navigate的使用与刷新页面问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、router.navigate的使...
    99+
    2022-10-19
  • 如何解决layer关闭弹出窗口触发表单提交的问题
    这篇文章主要介绍如何解决layer关闭弹出窗口触发表单提交的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、前言 表单的代码:<form>  此处理代码...
    99+
    2022-10-19
  • 如何解决vue+elementUI复杂表单的验证、数据提交方案问题
    小编给大家分享一下如何解决vue+elementUI复杂表单的验证、数据提交方案问题,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!当我们在做后台管理系统时,经常会遇到非常复杂的表单:表单项...
    99+
    2022-10-19
  • 计算机网络页面中如何解决type=file文件修改表单名称不能正常回显的问题
    这篇文章主要介绍了计算机网络页面中如何解决type=file文件修改表单名称不能正常回显的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。easyui 框架下 &...
    99+
    2023-06-08
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作