js中form表單屬性介紹及阻止默認跳轉和獲取后端返回數(shù)據(jù)的方法
-
method
- 請求方式虎锚，一般使用get和post
-
enctype
- application/x-www-form-urlencoded
對所有字符都會進行編碼（空格轉換為 "+" 加號她我，特殊符號轉換為 ASCII HEX 值） - multipart/form-data
不對字符編碼缰盏。在使用包含文件上傳控件的表單時掸绞，必須使用該值 - text/plain
空格轉換為 "+" 加號，但不對特殊字符編碼
- application/x-www-form-urlencoded
-
action
請求地址
-
name
設置表單名稱
-
novalidate
阻止表單默認的驗證規(guī)則咽安，否則會與開發(fā)中的驗證規(guī)則發(fā)生沖突伴网，建議添加
-
阻止表單默認跳轉
ev.preventDefault(),但是同時會阻止表單的默認提交
- 通過iframe阻止跳轉，調(diào)用form的submit方法板乙，可以達到提交數(shù)據(jù)并且不會跳轉的目的
<form action="url" target="stop"></form>
<iframe name="stop" style="display:none;"></iframe>
-
form表單提交后是偷，獲取后端返回的數(shù)據(jù)
常見的獲取方式是通過jquery的ajaxForm拳氢，但是我們往往不會因為一個功能點而去增加項目的重量募逞，這是不合理的蛋铆，這里我們通過原生來實現(xiàn)這個功能,我們通過iframe阻止跳轉是因為我們的form指向了我們的iframe，請求后端后放接，后端返回數(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
}
