form的序列化,即將表單中的鍵值序列化為可提交的字符串
創(chuàng)新互聯(lián)網(wǎng)站建設(shè)提供從項(xiàng)目策劃、軟件開(kāi)發(fā),軟件安全維護(hù)、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評(píng)估等整套的建站服務(wù),主營(yíng)業(yè)務(wù)為網(wǎng)站制作、成都網(wǎng)站建設(shè),重慶APP開(kāi)發(fā)以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。創(chuàng)新互聯(lián)深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長(zhǎng)期合作。這樣,我們也可以走得更遠(yuǎn)!
表單
<form id="target"> <select name="age"> <option value="age1">20</option> <option value="age2" selected>21</option> </select> <input name="name" value="Cynthia"> <label>passsword</label> <input type="password" name="password" value="123456"> <input type="hidden" name="salery" value="3333"> <textarea name="description" cols="15" rows="5">description</textarea> <input type="checkbox" name="hobby" value="football" checked> Football <input type="checkbox" name="hobby" value="basketball"> Basketball <input type="radio" name="sex" value="Female" checked> Female <input type="radio" name="sex" value="Male"> Male </form>
方法一
function serializeForm1(form){ var setForm = ""; for(var key in form){ if(form.hasOwnProperty(key)){ setForm += '"'+form[key].name+'"'+':'+'"'+form[key].value + '"'+','; } } setForm = "{" + setForm.slice(0,setForm.length -1) + "}"; console.log(setForm); // console.log(JSON.parse(setForm)); return JSON.parse(setForm); } // 調(diào)用 var oForm = document.getElementById('target'); console.log(serializeForm3(oForm));
結(jié)果:
方法二
function serializeForm2(form) { var parts = []; for (var i = 0, i1 = form.elements.length; i < i1; i++) { var field = form.elements[i]; switch (field.type) { case 'select-one': case 'select-multiple': if (field.type.length) { for (var j = 0, j1 = field.options.length; j < j1; j++) { var option = field.options[j]; if (option.selected) { var optionValue = ''; if (option.hasAttribute('value') && option.attributes['value'].specified) { //specified表明是否有此屬性,有的話返回true,若定義了此屬性但尚未添加到元素中也返回true。 optionValue = option.value; } else { optionValue = optionValue.text; } parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(optionValue)); } } } break; case undefined: case 'file': case 'submit': case 'reset': case 'button': break; case 'radio': case 'checkbox': if(!field.checked){ break; }else{ parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.dataset['index'])); break; } default: if(field.name.length){ parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value)); } } } return parts.join('&'); } // 調(diào)用 var oForm = document.getElementById('target'); console.log(serializeForm2(oForm));
結(jié)果:
方法三
function serializeForm3(form){ if(!form||form.tagName.toUpperCase()!='FORM'){ return false; } var res=[]; var tag,tagType,tagVal,tagName; for(var i=0;i<form.length;i++){ tag=form[i]; tagType=form[i].type; tagVal=form[i].value; tagName=form[i].name; var reg1=/['textarea'|'text'|'passsword'|'label']/g; var reg2=/['radio'|'checkbox']/g; var reg3=/['select']/g; if(reg1.test(tagType)){ res.push(encodeURIComponent(tagName)+"="+encodeURIComponent(tagVal)); }else if(reg2.test(tagType)&&tag.checked){ res.push(encodeURIComponent(tagName)+"="+encodeURIComponent(tagVal)); }else if(reg3.test(tagType)){ for(var j=0;j<tag.options.length;j++){ if(tag.options[j].selected){ res.push(encodeURIComponent(tagVal)+"="+encodeURIComponent(tag.options[j].value||tag.options[j].text)); } } }else{} } return res.join(" & "); } // 調(diào)用 var oForm = document.getElementById('target'); console.log(serializeForm3(oForm));
結(jié)果:
以上就是本文的全部?jī)?nèi)容啦,希望對(duì)大家有所幫助~
網(wǎng)頁(yè)題目:form表單序列化詳解(推薦)
網(wǎng)頁(yè)路徑:http://muchs.cn/article4/jchjie.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站、App開(kāi)發(fā)、App設(shè)計(jì)、定制網(wǎng)站、小程序開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)