HTML/Javascript: 点击按钮页面刷新问题
2016-10-18 14:26
387 查看
注:我只是为了说明点击按钮页面刷新的问题,并不是指这一功能有缺陷。下面我会举出我遇到的例子。
上图是我制作的一个很简易的HTML表单。当我按下全选按钮时,发现有一瞬间全部项目打上勾,但是立马所有勾就消失了。当时感觉很奇怪,在怀疑是不是js的代码出现错误了,可是经过自己核对没有发现什么错误。
于是我就打开了Chrome的调试器,输入以下内容:
运行后第一个选项能正常被打勾。然后我点击了全选按钮,调试器里的内容瞬间变空:
这说明了什么?说明了当我点击全选按钮时,页面被刷新了,自然所有打勾的都被清空了。
那为什么会出现这种情况?我们来看一下HTML代码:
问题就出在form标签上。因为数据用form提交一定会刷新页面,于是我们只要把form标签删去,就能得到我们想要的效果了(也就是点击按钮不会刷新)。
但是在实际中,form标签是必不可少的,为了解决问题,可以用ajax实现。
在这里要重新说明一下:点击按钮出现刷新,这是正常现象,因为有form元素;但是我并不想将数据传到服务器,只是想实现这种效果才将form标签删去。总而言之,现实中肯定不能使用我这种简单粗暴的做法,应用其他方法解决,我只是从这次经历中了解到:form标签提交数据时会刷新页面。
以上内容皆为本人观点,欢迎大家提出批评和指导,我们一起探讨!
上图是我制作的一个很简易的HTML表单。当我按下全选按钮时,发现有一瞬间全部项目打上勾,但是立马所有勾就消失了。当时感觉很奇怪,在怀疑是不是js的代码出现错误了,可是经过自己核对没有发现什么错误。
于是我就打开了Chrome的调试器,输入以下内容:
运行后第一个选项能正常被打勾。然后我点击了全选按钮,调试器里的内容瞬间变空:
这说明了什么?说明了当我点击全选按钮时,页面被刷新了,自然所有打勾的都被清空了。
那为什么会出现这种情况?我们来看一下HTML代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="index.js"></script> </head> <body> <form> <input type="checkbox" name="hobby" value="跑步" id="hobby1"> 跑步 <input type="checkbox" name="hobby" value="跳舞" id="hobby2"> 跳舞 <input type="checkbox" name="hobby" value="唱歌" id="hobby3"> 唱歌 <br> <button id="selectall">全选</button> <button id="cancelall">全不选</button> <br> <input type="text" name="choice" id="choice"> <button type="submit" id="submit">提交</button> </form> </body> </html>
问题就出在form标签上。因为数据用form提交一定会刷新页面,于是我们只要把form标签删去,就能得到我们想要的效果了(也就是点击按钮不会刷新)。
但是在实际中,form标签是必不可少的,为了解决问题,可以用ajax实现。
在这里要重新说明一下:点击按钮出现刷新,这是正常现象,因为有form元素;但是我并不想将数据传到服务器,只是想实现这种效果才将form标签删去。总而言之,现实中肯定不能使用我这种简单粗暴的做法,应用其他方法解决,我只是从这次经历中了解到:form标签提交数据时会刷新页面。
以上内容皆为本人观点,欢迎大家提出批评和指导,我们一起探讨!
相关文章推荐
- javaScript--对话框(在a.html页面点击按钮跳转到b.html页面,在b页面输入数据后,数据传回a页面)
- html和JavaScript,用户点击浏览器后退按钮,或者返回上一步自动刷新方式
- JavaScript html js页面刷新之后下拉菜单选中值不变,在按钮提交后保存下拉列表中值不变
- 关于点击按钮后页面自动刷新的问题
- HTML点击按钮或链接不跳转只刷新页面的方法
- 在自己写的html中点击button,页面会自动刷新的问题
- layui点击按钮自动刷新页面问题
- javascript+Struts2解决退出清空session以后,点击后退按钮显示原页面信息的问题
- 解决点击浏览器返回按钮回到上一页面,页面变为初始界面的问题(java+html)
- 解决JavaScript页面刷新与弹出窗口问题
- html页面自动刷新问题
- 如何点击按钮弹出新窗口,输入数据后返回并刷新页面?(C#代码)
- [ASP.NET]如何点击按钮弹出新窗口,输入数据后返回并刷新页面?(C#代码)
- 解决JavaScript页面刷新与弹出窗口问题
- ]如何点击按钮弹出新窗口,输入数据后返回并刷新页面?(C#代码)
- 如何点击按钮弹出新窗口,输入数据后返回并刷新页面?
- 点击asp:button按钮后,不刷新当前页面
- [ASP.NET]如何点击按钮弹出新窗口,输入数据后返回并刷新页面?(C#代码)
- 如何点击按钮弹出新窗口,输入数据后返回并刷新页面?
- 禁用页面缓存。目的:用户登录后退出。点击浏览器后退按钮造成的问题