首页 > 代码库 > 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="http://www.mamicode.com/default value">
<br/>
<input type="radio" name="sex" value="http://www.mamicode.com/male" /> Male
<input type="radio" name="sex" value="http://www.mamicode.com/female"/>Female
<br/>
<input type="checkbox" name="bike"/>My bike.
<input type="checkbox" name="car" />My car.
<br/>
<select name="cars">
<option value="http://www.mamicode.com/volvo">Volvo</option>
<option value="http://www.mamicode.com/saab">Benz</option>
<option value="http://www.mamicode.com/fiat">BMW</option>
<option value="http://www.mamicode.com/audi">Audi</option>
</select>
<select name="name" multiple="multiple">
<option value ="zhangsan">zhangsan</option>
<option value="http://www.mamicode.com/lisi">lisi</option>
<option value ="wangwu">wangwu</option>
<option value="http://www.mamicode.com/zhaoliu">zhaoliu</option>
</select>
<br/>
<input type="button" onclick="show()" value="http://www.mamicode.com/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=http://www.mamicode.com/(option.hasAttribute("value")?
option.value:option.text);
}else{
optValue=http://www.mamicode.com/(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>本文出自 “空空如也” 博客，请务必保留此出处http://6738767.blog.51cto.com/6728767/1584929
JavaScript示例十（表单序列化）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。