是在做项目时遇到的问题
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表单提交
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” 才可以提交。