表单序列化
2019-04-10 本文已影响3人
CondorHero
表单通过 Ajax 提交一共两种方式：
- form 表单的 method 一次性提交
- 表单序列化，使用 get post 提交指定表单元
表单序列化的好处就在于不用每次提交都全部提交表单内容。更加适合用作JSON接口。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的提交！</title>
</head>
<body>
<form id = "biaodan">
<p>
输入用户名：
<input name = "name1" type="text">
</p>
<p>
请输入密码：
<input name = "name2" type="passeord">
</p>
<p>
性别：<input type="radio" value = "女" name = "name3">女
<input type="radio" value = "男" name = "name3">男
</p>
<p>
爱好：<input type="checkbox" value = "弹琴" name = "name4">弹琴
<input type="checkbox" value = "下棋" name = "name4">下棋
<input type="checkbox" value = "画画" name = "name4">画画
<input type="checkbox" checked value = "书法" name = "name4">书法
</p>
<p>
地区：
<select name = "name5">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option selected="selected" value="合肥">合肥</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="成都">成都</option>
</select>
</p>
<p>
留言：<br><br>
<textarea name="name6" id="" cols="40" rows="5"></textarea>
</p>
<p>
<input type="button" value = "提交" id = "btn">
</p>
</form>
<script src = "js/myAjax.js"></script>
<script>
var biaodan = document.getElementById("biaodan");
var btn = document.getElementById("btn");
btn.onclick = function(){
//得到表单中的所有控件，表单的elements属性
var elems = biaodan.elements;
//检测输出
console.log(elems);
//接收结果的数组
var arr = [];
//遍历表单
for(var i = 0;i < elems.length; i++){
//得到表单元素
var e = elems[i];
//检测输出表单类型
console.log(e.type);
//根据结果把内容放进数组
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":
//内容为checked才为选中内容
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;
}
}
//得到数组可以用arr.join转化为JSON
console.log(arr);
}
</script>
</body>
</html>
