- method
請(qǐng)求方式疾捍,一般使用get和post - enctype
- application/x-www-form-urlencoded
對(duì)所有字符都會(huì)進(jìn)行編碼(空格轉(zhuǎn)換為 "+" 加號(hào)瓮恭,特殊符號(hào)轉(zhuǎn)換為 ASCII HEX 值) - multipart/form-data
不對(duì)字符編碼。在使用包含文件上傳控件的表單時(shí)搓茬,必須使用該值 - text/plain
空格轉(zhuǎn)換為 "+" 加號(hào)泳姐,但不對(duì)特殊字符編碼 - action
請(qǐng)求地址 - name
設(shè)置表單名稱
- application/x-www-form-urlencoded
- novalidate
阻止表單默認(rèn)的驗(yàn)證規(guī)則档泽,否則會(huì)與開發(fā)中的驗(yàn)證規(guī)則發(fā)生沖突坦康,建議添加 - 阻止表單默認(rèn)跳轉(zhuǎn)
ev.preventDefault(),但是同時(shí)會(huì)阻止表單的默認(rèn)提交- 通過iframe阻止跳轉(zhuǎn),調(diào)用form的submit方法火架,可以達(dá)到提交數(shù)據(jù)并且不會(huì)跳轉(zhuǎn)的目的
<form action="url" target="stop"></form>
<iframe name="stop" style="display:none;"></iframe>
-
form表單提交后鉴象,獲取后端返回的數(shù)據(jù)
常見的獲取方式是通過jquery的ajaxForm,但是我們往往不會(huì)因?yàn)橐粋€(gè)功能點(diǎn)而去增加項(xiàng)目的重量何鸡,這是不合理的炼列,這里我們通過原生來實(shí)現(xiàn)這個(gè)功能,我們通過iframe阻止跳轉(zhuǎn)是因?yàn)槲覀兊膄orm指向了我們的iframe,請(qǐng)求后端后音比,后端返回?cái)?shù)據(jù)也就指向了我們的iframe
<form action="url" target="stop"></form>
<iframe name="stop" style="display:none;" id="formData"></iframe>
- javascript
document.queryselect('#formData').onload = function() {
let data = JSON.parse(this.contentWindow.document.body.innerText
}