1、form表單的常用屬性
? ? 表單的作用:
????表單在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集功能屹培。用于采集用戶輸入的信息默穴,并通過from標(biāo)簽的提交操作,把采集到的信息提交到服務(wù)器進(jìn)行處理褪秀。
? ? 表單域:
包含了文本框蓄诽、密碼框、隱藏域媒吗、多行文本框仑氛、復(fù)選框、單選框闸英、下拉選擇框和文件上傳框锯岖。
? ? form? ?屬性
? ? action 屬性用來規(guī)定當(dāng)提交表單時,向何處發(fā)送表單數(shù)據(jù)
? ? 當(dāng)提交表單后甫何,頁面會立即跳轉(zhuǎn)到action屬性指定的URL地址
? ? target? 屬性用來規(guī)定在何處打開 action URL 中有五個值??
?????_blank? 在新窗口中打開
? ? _self 默認(rèn)出吹,在相同的框架中打開
? ? _parent? 在父框架幾種打開
? ? _top 在整個窗口中打開
? ? framename 在指定的框架中打開
? ? method屬性用來規(guī)定以何種方式把表單數(shù)據(jù)提交到 action URL
? ? enctype屬性用來規(guī)定在發(fā)送表單數(shù)據(jù)之前如何對數(shù)據(jù)進(jìn)行編碼
2、阻止表單的默認(rèn)提交行為
? ? 表單的同步提交及缺點
? ? ? ? 通過點擊submit按鈕辙喂,觸發(fā)表單提交的操作捶牢,從而使頁面跳轉(zhuǎn)到 action URL的行為鸠珠,叫做表單的同步提交
? ? 缺點:
? ? 頁面會發(fā)生跳轉(zhuǎn)
????頁面之前的狀態(tài)和數(shù)據(jù)會丟失
? ? 解決方案: 表單只負(fù)責(zé)采集數(shù)據(jù),ajax負(fù)責(zé)將數(shù)據(jù)提交到服務(wù)器
? ? element.preventDefault()
3秋麸、快速的獲取表單數(shù)據(jù)
? ? serialize()方法
serialize() 方法通過序列化表單值渐排,創(chuàng)建 URL 編碼文本字符串。
您可以選擇一個或多個表單元素(比如 input 及/或 文本框)竹勉,或者 form 元素本身飞盆。
序列化的值可在生成 AJAX 請求時用于 URL 查詢字符串中。
4次乓、模板引擎
它根據(jù)程序員指定的模板結(jié)構(gòu)和數(shù)據(jù)吓歇,自動生成一個完整的HTML頁面
? ? 優(yōu)點:
? ? ? ? 減少了字符串的拼接操作
? ? ? ? 使代碼結(jié)構(gòu)更清晰
? ? ? ? 使代碼更易于閱讀與維護(hù)