原生js实现表单序列化，以及代码测试
2018-11-09 本文已影响0人
自律财富自由
高级程序设计上的代码有点问题，做了修改，并测试过了。
先放代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>fabric</title>
<style>
</style>
</head>
<body>
<form id="login" name="login">
<p>用户名：<input id="txtUserName" name="txtUserName" type="text" /></p> <!--用户名文本框-->
<p>密 码：<input id="txtPWD" name="txtPWD" type="text" /></p> <!--密码文本框-->
<select name="selectBox" id="selectBox">
<option value="A">AVALUE</option>
<option value="B">bVALUE</option>
<option value="">C</option>
</select>
</form>
<button onclick="FormData(event)" id="subLogin">提交</button><!--提交按钮-->
<script>
function FormData (e) {
console.log(e)
var form = document.getElementById('login')
var params = serilize(form)
console.log('params = ', params)
}
function serilize(form) {
console.log(123)
var parts = [],
filed = null,
i,
j,
len,
optLen,
option,
optValue;
for (i = 0, len = form.elements.length; i < len; i++) {
// form表单元素
filed = form.elements[i];
console.log('filed = ', filed)
console.log('filed type = ', filed.type)
switch(filed.type) {
case 'select-one':
case 'select-multiple':
// select的options
if (filed.name.length) {
for (j = 0,optLen = filed.options.length; j < optLen; j++) {
// select的选项
option = filed.options[j];
console.log('option = ', option)
if (option.selected) {
console.log('option.text = ', option.text)
console.log('option.value = ', option.value)
optValue = ''
if (option.hasAttribute) {
console.log('option.hasAttribute value = ', option.hasAttribute('value'))
// 这里与高程上不一样，做了修改，因为如果select的option的value属性为空，但是option的text不为空的时候，是不正确的
optValue = (option.hasAttribute('value') && option.value.length) ? option.value: option.text
console.log('optValue = ', optValue)
} else {
// IE，同上做了修改
optValue = (option.attributes['value'].specified && option.specified.length) ? option.value: option.text
}
parts.push(encodeURIComponent(filed.name) + '=' + encodeURIComponent(optValue))
console.log('option parts = ', parts)
}
}
}
break;
case undefined:
case 'file':
case 'submit':
case 'reset':
case 'button':
break;
case 'radio':
case 'checkbox':
if (!filed.checked) {
break;
}
default:
// 表单控件的name属性不为空
console.log('filed.name = ', filed.name)
if (filed.name.length) {
console.log('length')
这里应该是filed.value, 而不是optValue
parts.push(encodeURIComponent(filed.name) + '=' + encodeURIComponent(filed.value))
}
}
}
return parts.join('&');
}
</script>
</body>
</html>
测试结果
value不为空得时候
image.png
value为空得时候
image.png
序列化的目的：
一般我们使用AJAX向后端发送请求的时候，有时候需要传很多的参数，一个个的写，不仅增加了代码，还会很花费时间。
如果这些参数正好都是form表单的值，那我们可以直接写data: serilize(form),就不用一个字段一个字段的写出来了。
