JSP中点击button自动刷新页面的问题

最新推荐文章于 2023-07-04 11:16:06 发布

王某丶

最新推荐文章于 2023-07-04 11:16:06 发布

阅读量2.2k

点赞数 4

分类专栏：那你能帮帮我吗 ---- 遇到的问题和解决方案

本文链接：https://blog.csdn.net/wangshuaiwei86/article/details/115627196

版权

那你能帮帮我吗 ---- 遇到的问题和解决方案专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在JSP页面遇到一个问题，当在form表单内添加一个button并绑定onclick方法时，点击按钮会导致页面自动刷新并执行onready方法。解决方法是将button移出form或使用input[type='button']，或者在form标签内设置onsubmit='return false'，以防止表单提交引发的页面刷新。问题的关键在于理解form表单的默认提交行为及其影响。

摘要由CSDN通过智能技术生成

今天碰见一个奇葩的问题，自己研究了半个小时都没研究明白啥情况，最后查资料、问同学解决了，记录一下

问题描述：

在jsp页面中，有一个form表单，在form表单中需要增加一个新的按钮，按钮的作用是触发一个方法，可以在页面中显示一个弹出的窗口，进行录入等功能。

最初我的做法是：在相应的位置增加了一个button，然后将onclick方法绑定在button上，完成onclick方法，但写完调试时发现一个重大的问题，在执行完方法体后，当前页会莫名其妙的自动刷新并执行了onready方法，导致根本不能获得所需要的效果。

源代码逻辑伪代码表示如下：

<form>
......
    <button onclick="clickFun()">一个按钮</button>
......
</form>

<script>
    function clickFun(){
        $("#xxxDiv").show();
    }
</script>

在js里打断点，发现执行完clickFun后直接跳到JQ的代码里了，肯定不是这个原因，并且方法结构很简单，半天找不到原因是啥。

解决：

解决的思路很简单，要么是 将button放在form表单外，或者用input type=‘button’ 代替 button组件，还有一种方法是在form标签内指定 οnsubmit='return false'

原因分析：

form表单内的button会自动提交表单数据到form所在的action中，在浏览器的效果就是刷新了当前的页面，为避免这种情况的出现需要指定onsubmit，或者使用其他的提交方法。