form表单下的button不设置type会自动提交表单

是在做项目时遇到的问题
form标签下，

 <form id="realtime" name="realtime">
 ...
	<button class="btn btn-outline-primary btn-sm"  id="addGroup" >添加组 	</button>
</form>

点击按钮执行的事件有：

$('#addGroup').on('click',function (){
   //发起ajax请求
 })

在浏览器中查看请求，如下图：

上边的是我ajax中请求，下边起初是不知道咋来的

后来了解到：
form表单下的按钮在没有指定type类型的时候，button会有一个默认的type=”submit”

Button按钮的type有三个可选属性：Button，submit，reset，而Button按钮的type属性默认值是submit ，所以在没有指定type属性的情况下，点击Button按钮会触发提交form表单

解决办法：

给button设置一个类型type=“button”，这样button的类型就不是默认的submit了，就不会自动提交表单了

<button type="button" class="btn btn-outline-primary btn-sm"  id="addGroup" >添加组 </button>

修改后查看浏览器，没下面的那个请求了

form表单中的action属性的值是表单提交给的url，如果我们没有设置action属性，那么默认的表单还是提交给当前页面

浏览器行为：Form表单提交

• form表单常用属性

action：url 地址，服务器接收表单数据的地址

method：提交服务器的http方法，一般为post和get

name：name属性的唯一性

enctype: 表单数据提交时使用的编码类型，默认使用"application/x-www-form-urlencoded"，如果是使用POST请求，则请求头中的content-type指定值就是该值。
如果表单中有上传文件，编码类型需要使用"multipart/form-data"，类型，才能完成传递文件数据。

enctype为form表单数据的编码格式，Content-type为Http传输的数据的编码格式。

• 浏览器提交表单时，会执行如下步骤

1、识别出表单中表单元素的有效项，作为提交项
2、构建一个表单数据集
3、根据form表单中的enctype属性的值作为content-type对数据进行编码
4、根据form表单中的action属性和method属性向指定的地址发送数据

• 提交方式

1、get:表单数据会被encodeURIComponent后以参数的形式:name1=value1&name2=value2 
附带在url?后面，再发送给服务器，并在url中显示出来。
2、post：enctype 默认"application/x-www-form-urlencoded"对表单数据进行编码，数据以键值
对在http请求体中发送给服务器；如果enctype 属性为"multipart/form-data"，则以消息的形式发
送给服务器。

在HTML标签中,form表单默认的提交方式是get，如果想变成post必须把method属性值改为post即method=“post” 才可以提交。