serializearray(serializearray取不到值)

张工 2022-06-28 21:32:48 阅读:43
  

  当我们有一个form表单,里面有很多form元素的时候,我们不可能一个一个的获取form元素里的值进行拼接!这样会很痛苦!为了方便与后台交互,提高你的开发效率,又不伤你的蛋;让我们用native编写一个表单序列化方法:

  先介绍一下jquery中有相应的表单序列化的方法:

  1.serialize()方法

  格式:var data=$('form ')。serialize();

  函数:将表单内容序列化为字符串。

  这样,ajax提交表单数据时,就没有必要一一列出每个参数。只需将数据参数设置为$('form ')。序列化()。

  2.serializeArray()方法

  格式:var JSON data=$ ('form ')。serialize array();

  功能:将页面表单序列化为JSON结构的对象。注意,它不是一个JSON字符串。

  例如,[{ '姓名' 3360 '李惠','年龄' 3360' 20'},{.}]采集的数据是jsondata [0]。姓名;

  下面我们用原声js来实现我们的form表单序列化的函数;

  首先,我们列出步骤:

  1)首先获取表单form,使用ById或forms;

  2)获取后,通过elements获取表单中所有元素的数组;

  3)之后遍历判断类型(根据类型拼接对应的对象)实现序列化对象;

  代码如下:

  函数formser(form){

  var form=document . getelementbyid(form);

  var arr={ };

  for(var I=0;I形式.元素.长度;i ) {

  var feled=form . elements[I];

  开关(feled.type) {

  案例未定义:

  案例'按钮' :

  案件'档案' :

  案例“重置”:

  案例“提交”:

  打破;

  案例'复选框' :

  案例“收音机”:

  如果(!feled.checked) {

  打破;

  }

  默认:

  if (arr[feled.name]) {

  arr[feled . name]=arr[feled . name]',' feled.value

  }否则{

  arr[feled . name]=feled . value;

  }

  }

  }

  返回arr

  },

最后

  以下是总结的最全面的前端帧视频,包括:JavaScript/Vue/React/Angualrde/Express/KOA/Web Pack等学习资料。


原生js实现form表单序列化的方法


【领取方式】

  

关注头条 前端全栈架构丶第一时间获取最新前端资讯学习

  

手机用户可私信关键词 【前端】即可获取全栈工程师路线和学习资料!

二维码