如题

因为button标签按钮会提交表单。

解决方法如下:

1、将<button></button>改为<input type="button">  或者直接在<button>中添加属性 type="button".

2、在button的点击事件中加入“e.preventDefult()”

$('btn').click(function(e){

e.preventDefult();

});

加入type = "button"后解决问题。

扩展资料:

<button> 标签定义一个按钮。

在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。

唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。

点击button会自动刷新页面的更多相关文章

  1. 关于button标签会刷新页面的问题

    当button标签在form表单里面时,这时点击button按钮会提交表单刷新页面. <form action=""> <button>点击</but ...

  2. form表单中的button自动刷新页面问题

    form表单中如果存在button的话,有可能会出现一个问题:点击button,触发了页面的自动刷新事件. 原因是因为<button>标签默认的类型是submit,即默认的button点击 ...

  3. js自动刷新页面代码

    <script language="JavaScript">function myrefresh(){window.location.reload();}setTime ...

  4. 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...

  5. javascript(js)自动刷新页面的实现方法总结

    自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...

  6. 使用gulp插件来自动刷新页面。

    http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...

  7. gulp+browserSync自动刷新页面

    BrowserSync “Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平 ...

  8. ios 返回不会自动刷新页面问题

    在实际开发过程中,移动端的兼容性问题有很大的坑,安卓可以了ios不行,ios可以了安卓又失效了这样,其中ios的回退操作就是不会自动刷新页面,很烦! 常见的history.back() history ...

  9. js返回上一页并刷新、返回上一页、自动刷新页面

    一.返回上一页并刷新 <a href="javascript:" onclick="self.location=document.referrer;"&g ...

随机推荐

  1. css3 手风琴

    1.看了网上很多关于css的手风琴案例,但是都没有讲到相关的原理. 主要原理1. 利用target属性.2.锚点链接. <!doctype html><html><hea ...

  2. spring mvc 配置之 context:annotation-config vs component-scan

    <context:annotation-config/> spring的注解@Resource.@Autowire, @Required and @Qualifier 等注解只是一个提示, ...

  3. tensorflow的简单操作

    import tensorflow as tf c1 = tf.constant([[3,3]]) c2 = tf.constant([[3],[2]]) product = tf.matmul(c1 ...

  4. springboot整合JPA(简单整理,待续---)

    整合步骤 引入依赖: <dependencies> <dependency> <groupId>org.springframework.boot</group ...

  5. Jenkins安装及基本配置(Linux版,使用web容器 tomcat 搭建)

    Jenkins是什么 Jenkins 是一个可扩展的持续集成引擎. 主要用于:      1 持续.自动地构建/测试软件项目.     2 监控一些定时执行的任务. Jenkins拥有的特性包括:   ...

  6. mysql中的内置函数

    这里主要介绍mysql丰富的内置函数. 数学函数 数学函数相对比较简单,就是涉及一些数值的计算,这里列出数学函数的功能,仅个别给出实例. 函数 作 用 ABX(x) 返回x的绝对值 CEIL(X),C ...

  7. Servlet3.0与springmvc那些事

    官方文档:https://docs.spring.io/spring/docs/5.0.2.RELEASE/spring-framework-reference/web.html#mvc-servle ...

  8. MySQL表结构更新规范

    以下以新增字段为例,修改.删除.新增表的操作类似: 步骤: 1.PDM(中文名称为产品数据管理(Product Data Management))增加字段,并注明新增字段的注释 2.数据库编写sql语 ...

  9. HTTP简单解析

    一.简介 HTTP是一种基于TCP/IP的超文本传输协议,用于从WWW服务器传输超文本到本地浏览器. HTTP是一种基于客户端/服务器(C/S架构)的无状态.无连接.媒体独立的传输协议. HTTP是一 ...

  10. Notepad++的Json格式化插件

    安装  :1.下载插件压缩包并解压出dll:Jsonviewer2.dll(64位)或NPPJSONViewer.dll(32位); 2..拷贝对应dll到Notepad++安装目录下的plugins ...