表单提交
四个用于表单提交的属性
- action:数据发送的位置
- method:数据发送的方式
- enctype:数据编码的方式
- target:展示结果的位置
action
定义了数据发送的位置,它的值必须是一个有效的URL,假如没有填写,默认值为当前网页的URL
method
规定了发送数据的HTTP方法(例如GET,POST)
GET:数据将作为URL的参数,数据将以键值对的方式拼接到action的URL上
POST:数据将在请求体中,表单中的数据将被放在HTTP请求的主体中
enctype
定义发送数据的编码方式
当数据在请求体中发送,也就是method设置为POST时,数据需要根据enctype进行编码
支持三种编码方式
application/x-www-form-urlencoded(默认)
最常见的编码方式,以键值对的方式进行编码
multipart/form-data
二进制数据提交(文件上传)
text/plain(不常用)
target
规定提交表单后,接受服务器返回内容的位置
_self(默认):当前页面加载结果
_blank:新开窗口中加载结果
_parent:父级窗口中加载结果,如果没有父级就与_self一致
_top:顶级窗口中加载结果
_iframename:指定的frame中进行加载
提交按钮的提交属性
提交按钮的如下属性将会覆盖form元素上对应的属性值
- formaction
- formmethod
- formmenctype
- formtarget
表单提交的方式
提交按钮(submit类型的button,或input)
隐式提交
HTMLFormElement.submit()
另外表单提交后,默认是当前页面接收返回的数据,因此页面会发生刷新,假如我们不希望页面进行刷新,那么可以结合iframe无刷新提交表单
<form action=".login" method="GET" target="result"></form>
<iframe id="frame" name="result" style="display:none"></iframe>
可以在页面中添加一个不显示的iframe,将表单的target指向iframe,这样的话就有iframe接收服务的的返回值并进行展示,然后我们监听iframe的load事件,可以拿到服务端的返回值并进行处理
var forma=document.getElementById("aaa");
forma.addEventListener('load',function(event){
try{
var result=JSON.parse(frames.contentWindow.document.body.textContent)
}
catch(ex){
}
})