返回顶部
首页 > 资讯 > 前端开发 > 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://lsjlt.com/news/79898.html(转载时请注明来源链接)

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

猜你喜欢
  • 如何解决Ajax提交Form表单页面仍会刷新的问题
    小编给大家分享一下如何解决Ajax提交Form表单页面仍会刷新的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!搞了半天原来点...
    99+
    2024-04-02
  • vue如何解决form表单提交但不跳转页面的问题
    这篇文章将为大家详细讲解有关vue如何解决form表单提交但不跳转页面的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。vue使用@submit.prevent=&qu...
    99+
    2024-04-02
  • Ajax如何无刷新Url提交页面
    这篇文章将为大家详细讲解有关Ajax如何无刷新Url提交页面,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在Jquery,porotype,Ext等框架流行之后,大量简化...
    99+
    2024-04-02
  • Ajax提交表单页面刷新很快的示例分析
    这篇文章主要为大家展示了“Ajax提交表单页面刷新很快的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax提交表单页面刷新很快的示例分析”这篇文章吧...
    99+
    2024-04-02
  • ajax如何跨页面提交表单
    这篇文章将为大家详细讲解有关ajax如何跨页面提交表单,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前面提到过重复提交表单问题,处理token口令校验、重定向之外,还有一...
    99+
    2024-04-02
  • Ajax回退刷新页面问题怎么解决
    本篇内容介绍了“Ajax回退刷新页面问题怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Ajax 简...
    99+
    2024-04-02
  • 如何实现Jquery基于Ajax方法自定义无刷新提交表单Form
    本篇内容主要讲解“如何实现Jquery基于Ajax方法自定义无刷新提交表单Form”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何实现Jquery基于Ajax...
    99+
    2024-04-02
  • ajax如何实现无刷新提交表单、上传文件
    这篇文章主要介绍ajax如何实现无刷新提交表单、上传文件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、HTML代码 <!DOCTYPE html PUBLIC &...
    99+
    2024-04-02
  • Ajax如何解决多余刷新问题
    小编给大家分享一下Ajax如何解决多余刷新问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!控制器Servlet则提供了简单的改...
    99+
    2024-04-02
  • form表单无法提交到php如何解决
    这篇文章主要介绍“form表单无法提交到php如何解决”,在日常操作中,相信很多人在form表单无法提交到php如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”form表单无法提交到php如何解决”的疑...
    99+
    2023-07-04
  • 如何使用Ajax方法实现Form表单的提交
    这篇文章主要介绍了如何使用Ajax方法实现Form表单的提交,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。常见的form表单提交方式<...
    99+
    2024-04-02
  • 单页面Vue页面刷新出现闪烁问题及解决
    目录分析原因: 为什么刷新会出现闪烁的问题解决方法: 使用 v-cloak 用法关于Vue刷新页面问题如何解决 provide / inject 组合分析原因: 为什么刷新...
    99+
    2024-04-02
  • 如何解决ajax中提交数据到后台jsp页面及页面跳转问题
    这篇文章主要为大家展示了“如何解决ajax中提交数据到后台jsp页面及页面跳转问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决ajax中提交数据到后台...
    99+
    2024-04-02
  • 如何解决react-router browserHistory刷新页面404问题
    这篇文章主要介绍如何解决react-router browserHistory刷新页面404问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!背景使用webpack-dev-serv...
    99+
    2024-04-02
  • 如何解决页面刷新vuex数据消失的问题
    这篇文章主要为大家展示了“如何解决页面刷新vuex数据消失的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决页面刷新vuex数据消失的问题”这篇文章吧...
    99+
    2024-04-02
  • 如何解决vue this.$forceUpdate() 处理页面刷新问题
    这篇文章主要为大家展示了“如何解决vue this.$forceUpdate() 处理页面刷新问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决vue ...
    99+
    2024-04-02
  • vue解决刷新页面时会出现变量闪烁的问题
    目录刷新页面时会出现变量闪烁问题解决办法是: v-cloakvue刷新当前页面,且页面不闪烁场景:刷新当前页的方法provide/inject 组合介绍provide/inject ...
    99+
    2024-04-02
  • form表单只提交数据而不进行页面跳转的解决方案
    一般的form提交操作写法为 复制代码 代码如下: <form action="saveReport.htm" method="post"> …… <input t...
    99+
    2022-11-15
    form表单 提交数据 页面跳转
  • Vue3页面局部刷新组件的刷新问题怎么解决
    步入正题,解决今天的问题代码首先我们要对app.vue进行修改代码:<template> <div id="app"> <nav-View v-show="login&...
    99+
    2023-05-17
    Vue3
  • vue表单为空也能提交的问题如何解决
    这篇文章主要讲解了“vue表单为空也能提交的问题如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue表单为空也能提交的问题如何解决”吧!vue表单为空也能提交今天在用Vue写表单验证...
    99+
    2023-06-30
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作