異步提交表單數(shù)據(jù)最痛苦的兩個(gè)破事:
1、編碼亂碼問題
事實(shí)上 ajax 技術(shù)底層是 unicode 編碼,當(dāng) GBK 的頁面與接口進(jìn)行數(shù)據(jù)交互時(shí),會(huì)產(chǎn)生亂碼情況。解決方案有多種,可以將頁面轉(zhuǎn)化為 utf-8 編碼,或者發(fā)送數(shù)據(jù)前進(jìn)行兩次 encodeURI 編碼,在接受數(shù)據(jù)時(shí)進(jìn)行一次解碼。
2、獲取表單字段數(shù)據(jù)
拿 YUI3 來說,其實(shí)原生的 io-form 模塊已經(jīng)做了很好的封裝。其中有個(gè)叫做 _serialize 的私有方法,可以對(duì)異步提交表單的行為進(jìn)行預(yù)先編碼:
即使用了一個(gè)齷齪的私有方法,看上去確還算完美。假如字段的 name 屬性中沒有“[]”等特殊符號(hào),一般情況下都是沒問題的。
這個(gè) _serialize 方法的原理很簡單,通過獲取節(jié)點(diǎn)內(nèi) input,select 和 textarea 等字段,然后根據(jù) name 遍歷并取值即可。
一個(gè)簡單的代碼案例(YUI3):