当我们有 form 表单而且里面的表单元素较多时, 咱们总不能一个个去获取表单元素内的值来进行拼接吧! 这样会很让人蛋疼! 为了方便与后台交互并且提高自己的开发效率, 并且不让你蛋疼; 我们一起用原生来写一个表单序列化方法:
先介绍一下 jquery 中有相应的表单序列化的方法:
1.serialize()方法
格式: var data = $("form").serialize();
功能: 将表单内容序列化成一个字符串.
这样在 ajax 提交表单数据时, 就不用一一列举出每一个参数. 只需将 data 参数设置为 $("form").serialize() 即可.
2.serializeArray()方法
格式: var jsonData = $("form").serializeArray();
功能: 将页面表单序列化成一个 JSON 结构的对象. 注意不是 JSON 字符串.
比如,[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[0].name;
下面我们用原声 js 来实现我们的 form 表单序列化的函数;
首先我们列明步骤:
1)先获取 form 表单使用 ById 或者是 forms;
2)获取后通过 elements 取到表单中所有元素的数组;
3)之后进行遍历判断类型 (根据类型做相应的对象拼接) 实现序列化对象;
代码如下:
- function formser(form){
- var form=document.getElementById(form);
- var arr={};
- for (var i = 0; i < form.elements.length; i++) {
- var feled=form.elements[i];
- switch(feled.type) {
- case undefined:
- case 'button':
- case 'file':
- case 'reset':
- case 'submit':
- break;
- case 'checkbox':
- case 'radio':
- if (!feled.checked) {
- break;
- }
- default:
- if (arr[feled.name]) {
- arr[feled.name]=arr[feled.name]+','+feled.value;
- }else{
- arr[feled.name]=feled.value;
- }
- }
- }
- return arr
- },
来源: http://www.jb51.net/article/144962.htm