序列化表单

最新推荐文章于 2020-12-05 16:33:14 发布

原创最新推荐文章于 2020-12-05 16:33:14 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#序列化表单 #jq

jq 同时被 2 个专栏收录

20 篇文章

订阅专栏

html

16 篇文章

订阅专栏

本文介绍了两种将HTML表单数据转换为易于处理的JavaScript对象的方法。第一种方法使用`serialize()`方法并进行字符串处理；第二种方法利用`serializeArray()`简化转换过程。这两种方法均适用于处理包括复选框在内的各种表单元素。

方法一：

function getFormData(form){

  var data = form.serialize();

  data = decodeURI(data);

  var arr = data.split('&');

  var item,key,value,newData={};

  for(var i=0;i<arr.length;i++){

    item = arr[i].split('=');

    key = item[0];

    value = item[1];

    if(key.indexOf('[]')!=-1){

      key = key.replace('[]','');

      if(!newData[key]){

        newData[key] = [];

      }

      newData[key].push(value);

    }else{

      newData[key] = value;

    }

  }

  return newData;

}

function getFormData(form){

var data = form.serialize();

data = decodeURIComponent(data,true);

data = decodeURI(data);

var arr = data.split('&');

var item,key,value,newData={};

for(var i=0;i<arr.length;i++){

item = arr[i].split('=');

key = item[0];

value = item[1];

if(key.indexOf('[]')!=-1){

key = key.replace('[]','');

if(!newData[key]){

newData[key] = [];

}

newData[key].push(value);

}else{

newData[key] = value;

}

return newData;

}

方法一的2个不同在于decodeURIComponent的转义，根据自己编码格式选择是否转义

方法二：

$('#submit').click(function() {
var d = {};
var t = $('form').serializeArray();
$.each(t, function() {
d[this.name] = this.value;
});
alert(JSON.stringify(d));
});