jq表单序列化 serialize() serializeArray()的使用

系列文章目录



前言

问题 :如何快速获取form表单内的内容,而不是一个一个的获取。
1、这段时间在工作室遇到一个问题。因为之前一直使用的是一些js 框架所以也没去想这些问题。而这次任务中脱离框架后这个问题就显现出来了。一个一个的获取input的啊select 啊 文本域里的内容实在是太麻烦了索性自己封装个方法,日后用起来也方面。
提示:以下是本篇文章正文内容,下面案例仅供参考

一、方法

为节约时间把方法放在第一条

<form action="javascript::" id='form1' utf-8">
    <input type="text" name="name1">
    <input type="text" name="name2">
    <input type="text" name="name3">
    <input type="text" name="name4">
    <input type="text" name="name5">
    <select name="name6" >
        <option value=""></option>
        option
    </select>
</form>
/**
*content:将form标签内的内容转化为键值对,后台好处理。
*param:form (form对象。如·$('#form1'))
*return: {name1:val1,name2:vla2,name3:val3,......}
*/
function serializeObject(form){
    var o = {};
    form.find(".ui-select").each(function(r){
      var name=$(this).attr("name");
      var value=$(this).attr("data-value");
      o[name]= value;
    })


    $.each(form.serializeArray(),function(index){
      if(o[this['name']]){
        o[this['name']] = o[this['name']] + ","+this['value'];
      }else{
        o[this['name']] =  this['value'];
      }
    });
    return o;
  }

二、jq 涉及方法说明

1.serialize() 方法:

serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。
  您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中,这样在ajax提交表单数据时,就不用一一列举每一个参数,只需将data参数设置为:$(“form”).serialize()即可。

语法如下:

$(selector).serialize();

输出标准的查询字符串:a=1&b=2&c=3&d=4&e=5

注释:只会将“成功的控件”序列化为字符串。(即指没被禁用的元素)如果不使用按钮来提交表单,则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性。

2.serializeArray() 方法:

serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。
  您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身。
代码如下:

//格式:
var jsonData = $("form").serializeArray();

注意:此方法返回的是 JSON 对象而非 JSON 字符串。
  返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。举例来说:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值为空
]

特别说明,元素不能被禁用(禁用的元素不会被包括在内),并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。
  注意:1、不被禁用;2、包含name属性


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值