JavaScript樣本十（表單序列化），javascript序列化
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>表單序列化</title> </head> <body> <div style="width:350px;height:200px;background-color:YellowGreen"> <form id="myform"><input type="text" name="text" value="default value"><br/><input type="radio" name="sex" value="male" /> Male<input type="radio" name="sex" value="female"/>Female<br/><input type="checkbox" name="bike"/>My bike.<input type="checkbox" name="car" />My car.<br/><select name="cars"><option value="volvo">Volvo</option><option value="saab">Benz</option><option value="fiat">BMW</option><option value="audi">Audi</option></select><select name="name" multiple="multiple"><option value ="zhangsan">zhangsan</option><option value="lisi">lisi</option><option value ="wangwu">wangwu</option><option value="zhaoliu">zhaoliu</option></select><br/><input type="button" onclick="show()" value="show form serialize"> </form> </div> <textarea id="mytext" cols="42" rows="5"></textarea> <script>function serialize(form){var parts=[],field=null,i,len,j,optLen,option,optValue;for(i=0,len=form.elements.length;i<len;i++){field=form.elements[i];switch(field.type){case "select-one"://單選列表預設處理case "select-multiple"://對多選列表的處理最複雜，逐項判斷和累加if(field.name.length){for(j=0,optLen=field.options.length;j<optLen;j++){option=field.options[j];if(option.selected){optValue="";if(option.hasAttribute){optValue=(option.hasAttribute("value")?option.value:option.text);}else{optValue=(option.attributes["value"].specified?option.value:option.text);}parts.push(encodeURIComponent(field.name)+"="+ encodeURIComponent(optValue));}}}break;case undefined://預設處理case "file"://預設處理case "submit"://預設處理case "reset"://預設處理case "button"://不處理break;case "radio"://預設處理case "checkbox":if(!field.checked){break;}default://預設處理，要求必須有name屬性if(field.name.length){parts.push(encodeURIComponent(field.name)+"="+ encodeURIComponent(field.value));}}}return parts.join("&");}function show(){var myform=document.getElementById("myform");var mytext=document.getElementById("mytext");mytext.value = serialize(myform);} </script> </body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
