jquery form表单的serialize和serializeArray方法-博客-最代码

首页>博客>jquery form表单的serialize和serializeArray方法

阿宇yaoyao 2016-09-05 20:07:58

jquery form表单的serialize和serializeArray方法

参加工作有一定的时间了，有很大一部分时间实在写js代码，在这里总结一下工作里用到的表单提交的序列化的方法，有不对的的地方请各位牛牛指正。

表单提交有有很多种方式，如果表单比较长，或者内容比较多的话，可以用form表单的serialize方法来提交表单。

.serialize() 方法创建以标准 URL 编码表示的文本字符串，后台直接用表单元素中name属性对应的值接收即可。

<form id="f1">
  <div><input type="text" name="a" value="1" id="a" /></div>
  <div><input type="text" name="b" value="2" id="b" /></div>
  <div><input type="hidden" name="c" value="3" id="c" /></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
</form>

.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 <input>, <textarea> 以及 <select>。不过，选择 <form> 标签本身进行序列化一般更容易些：

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

输出标准的查询字符串：

a=1&b=2&c=3&d=4&e=5

如果整个表单的对象属于一个实体的属性，那么后台可以直接用这个实体接收，但是此时表单的name属性要变为对象名点属性名的格式。

<form id="f1">
  <div><input type="text" name="activity.a" value="1" id="a" /></div>
  <div><input type="text" name="activity.b" value="2" id="b" /></div>
  <div><input type="hidden" name="activity.c" value="3" id="c" /></div>
  <div>
    <textarea name="activity.d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="activity.e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  
</form>

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

输出字符串：

activity.a=1&activity.b=2&activity.c=3&activity.d=4&activity.e=5

如果表单的逻辑比较复杂，需要在前台进行一些逻辑的处理，拼接等等操作，则可以先用serializeArray()方法将表单不需要处理的字段序列化拿到表单的序列化数组对象，然后再将其转换为js对象，然后就可以把其他进行前台js处理之后的字段添加到对象里。

$('form').submit(function() {
  param=$(this).serializeArray();
  for(var i =0;i<param.length;i++){
      o[param[i].name]=param[i].value;
     }
  //添加进行逻辑处理后的字段值
  o["activity.f"]=$("#f").val();
  o["activity.g"]=$("#g").val();
  console.log(o)
  return false;
});

因为此时o为js对象所以用console.log()在浏览器控制台打印结果如下

activity.a=1
activity.b=2
activity.c=3
activity.d=8
activity.e=5
activity.f=8
activity.g=9

后台同样使用activity对象接收表单提交的参数

打赏

0个评论