首页 > 代码库 > 表单序列化
表单序列化
序列化表单值的作用是将表单中的值拼装成字符串形式的key-value键值对提交给后台服务器程序解析,来获取用户的输入值最总看到的效果如下
name=124&company=baidu.com&fav=1,2,3
下面是示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> <form id="biaodan"> <p> 请输入姓名: <input type="text" name="xingming" /> </p> <p> 请选择性别: <input type="radio" name="sex" value="男"/> 男 <input type="radio" name="sex" value="女"/> 女 <input type="radio" name="sex" value="保密"/> 保密 </p> <p> 请选择国籍: <input type="radio" name="nationality" value="中国"/> 中国 <input type="radio" name="nationality" value="外国"/> 外国 </p> <p> 请选择你的爱好: <input type="checkbox" name="hobby" value="足球"/> 足球 <input type="checkbox" name="hobby" value="篮球"/> 篮球 <input type="checkbox" name="hobby" value="吃饭"/> 吃饭 <input type="checkbox" name="hobby" value="睡觉"/> 睡觉 <input type="checkbox" name="hobby" value="打豆豆"/> 打豆豆 </p> <p> 选择你的省份: <select name="hometown" > <option value="北京">北京</option> <option value="上海">上海</option> <option value="东莞">东莞</option> <option value="广州">广州</option> </select> </p> <p> 密码: <input type="password" name="password" /> </p> <p> 留言: <textarea name="message" id="" cols="30" rows="10"></textarea> </p> <p> <input type="button" value="点击提交" id="btn"/> </p> </form> <script type="text/javascript" src="js/myajax.js"></script> <script type="text/javascript"> var biaodan = document.getElementById("biaodan"); var btn = document.getElementById("btn"); btn.onclick = function(){ //得到表单中的所有控件 var elems = biaodan.elements; //结果数组 var arr = []; //遍历所有的控件 for(var i = 0 ; i < elems.length ; i++){ //当前遍历的小元素 var e = elems[i]; //分类讨论: switch(e.type){ //如果控件的类型是个按钮,那么没有任何返回值 case "button" : case "submit" : case "reset" : break; case "text" : case "password" : case "textarea" : arr.push(e.name + "=" + e.value); break; case "radio": case "checkbox": e.checked && arr.push(e.name + "=" + e.value); break; case "select-one": var options = e.getElementsByTagName("option"); console.log(options); for(var j = 0 ; j < options.length; j++){ if(options[j].selected){ arr.push(e.name + "=" + options[j].value); } } break; } } console.log(arr.join("&")); } </script> </body> </html>
表单序列化
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。