button标签的type="submit"与type="button"的区别

最新推荐文章于 2023-02-13 08:27:15 发布
最新推荐文章于 2023-02-13 08:27:15 发布
阅读量3k 收藏 7
点赞数 1
分类专栏： 自留Mark 经验共享 文章标签： html button ajax type submit
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsdhla/article/details/42432669
版权

自己在做一个ajax的小例子，发现一个诡异的问题，点击页面button，调用ajax发送请求，后台方法可以成功调用，但是前台的ajax回调函数却没有执行，无论success、error、complete都没走，于是我连续快速点击按钮，发现偶尔可以成功调用success回调函数，更诡异的是，页面居然会刷新。。。。。。


经过多次对比测试，终于发现问题原因：button的type属性，将type设置为button，问题解决。


type="submit"，点击按钮会提交表单且刷新页面；

type="button"，按钮就是一个按钮而已！！！

wsdhla
关注
专栏目录
表单提交中的input、button、submit的区别
weixin_30376163的博客
12-29 2423
　　最近项目中用了很多的表单提交，发现input、button、submit甚至回车键都可以引发表单提交，下面将分别验证他们在使用中的区别。 1.input[type=submit] 我们直接来看例子： 代码如下： <form> <input name="name"> <input type="submit" value=...
JS中type="button"和type="submit"的区别
10-19
在JavaScript和HTML交互中，创建按钮常常涉及到`type="button"`和`type="submit"`两种类型，它们在功能上有着显著的区别。理解这些差异对于优化表单操作和用户体验至关重要。 首先，`type="button"`的按钮是纯功能...
type="button"和type="submit"的区别
koself的专栏
06-03 2369
type="button"和type="submit"的区别 type=＂button＂ ,＂submit＂ 的区别（转） 　　Submit是专门用于提交表单的Button，与Button的区别主要有两点： 　　type=button 就单纯是按钮功能  　　type=submit 是发送表单 　　 (1)Submit将表单提交(form.submit())作为其
button标签type默认为submit
tyt叮当tyt的专栏
08-09 1362
提交
type=＂button＂ ,＂submit＂ 的区别
m0_57071129的博客
05-10 1120
Submit是专门用于提交表单的Button，与Button的区别主要有两点： 　　 type=button 就单纯是按钮功能 type=submit 是发送表单 (1)Submit将表单提交(form.submit())作为其onclick后的默认事件，Button并非如此 (2)表单提交时，所有具有name属性的html输入元素(包括input标签、button标签、select标签等)都将作为键值对提交，除了Submit对象。Submit对象只有在自己被单击后的提交中才会作为...
type='button'和'submit'的区别
自强不息
11-21 268
今天在对表单的项目进行删除时出现了问题，原因就出现在点击input按钮时，这个input属性是type='button'还是type=‘submit'。 代码大致如下： &lt;script type="text/javascript"&gt; //获得选中文件的文件名 function GetCheckfolderItem() { var allSel...
JS中type=”button”和type=”submit”的区别
12-08
在JavaScript和HTML交互中，创建按钮常常涉及到`type="button"`和`type="submit"`两种类型，它们在功能上有着显著的区别。理解这些差异对于构建高效且用户友好的Web表单至关重要。 首先，`type="button"`是用来创建...
button和input type=button的区别及注意事项
09-28
另一个常见误区是将`<button>`误置于`<form>`标签内，这可能导致按钮变为提交按钮，等同于`<input type="submit">`。为了避免这种情况，务必清楚地定义按钮类型，并谨慎处理`<button>`在表单中的位置。 总的来说，`...
button没有指定type为submit点击按钮跳转不到指定url
12-13
然而，正如题目所描述的问题，如果`<button>`元素没有指定`type`属性，或者没有将其设置为`submit`，在某些浏览器中，特别是旧版本的Internet Explorer（例如IE6、IE7），点击按钮可能不会触发表单的提交动作，导致...
button没写type=button会导致点击时提交
09-04
然而，由于`<button>`元素没有指定`type`属性，浏览器按照默认行为处理，即`type="submit"`，导致了表单的提交，这可能是关闭弹窗的原因，因为表单提交可能触发了页面刷新或者跳转。 为了避免这种情况，我们需要...
前端＜button＞标签踩的坑，type默认值是submit
渣渣的成长之路
11-23 919
<button>标签如果没有加type，那么默认值是submit，这样提交后就会刷新。 之前老师讲课过就提到过，可是自己在应用中还是明知故犯了。。。
Form表单里的BUTTON的type='submit'和'button'的区别
夏小沫学习之路
08-14 2373
1.submit 用于提交表单时 使用 onsubmit=”“<form class="form-horizontal" onsubmit="checkform()"> <div class="control-group"> <label class="control-label" for="inputEmail">Email</label> <div c
html input中 button和submit的区别 （转帖）
weixin_30289831的博客
08-14 221
type=button 就单纯是按钮功能 type=submit 是发送表单 但是对于从事WEB UI的人应该要注意到，使用submit来提高页面易用性： 使用submit后，页面支持键盘enter键操作，而很多WEB软件设计师，可能没有注意到submit统一. 用button后往往页面不支持enter键了。所以需要支持enter键，必须要设置个submit...
js验证表单提交的多种方法,submit,button, type='button'
热门推荐
qq_45064049的博客
05-18 1万+
js验证表单提交第一种用submit按钮提交表单第二种用button按钮进行提交第三种用第一种用submit按钮提交表单 <!doctype html> <html> <head> <title></title> </head> <body> <form action="index.php" method...
<button></button> 与<input type="button"> <input type="submit">
David的博客
12-26 764
<button></button> 与<input type="button"> <input type="submit"> jquery骚操作
type="submit" 和type="button"
weixin_30247159的博客
08-03 164
今天，小菜鸟又遇到一个问题，当不小心在页面输入框回车一下，结果莫名的页面发出了一个请求。 把问题定位在一个button上，代码是这样写的<button class="btn btn-default" ng-click="upload()">确认上传</button> 上网一查，发现button默认的type是submit，为提交按钮，所以会发出一个请求； 我这里不需要...
<input type=”submit”>和<button type=”submit”>有什么不同？
weixin_42584758的博客
02-13 38
和 的不同在于它们的外观和用途。 是一个输入字段，通常是一个单行文本框，用于向服务器提交表单数据。它通常是一个简单的按钮，并且用户可以单击它来提交表单。 则是一个按钮元素，它允许开发人员在其中定义更丰富的内容，如文本、图像和样式。这使得它更适合用于创建复杂的设计和交互，并且可以在提交表单时使用。因此，当你需要简单的提交按钮时，使用 可能是更好的选择；而当你需要创建复 ...
button type="submit"
最新发布
08-09
button标签中的type属性值为"submit"时，表示该按钮将用于提交表单。点击这个按钮会引起表单提交，将表单中的数据发送到指定的URL进行处理。与type为"button"不同的是，type为"submit"的按钮具有默认的提交行为，而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wsdhla

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值