jQuery客户端表单数据获取

  jq在进行客户端表单数据获取我们通常用serialize或者是serizlizeArray(),两种方法,可是在serizlizeArray()返回的数据是一个数组,数组里分别对应的是每个对象,如下

[{
name: 'sex', //表单name值
value: '男' //表单value值
},
{
name: 'age', //表单name值
value: '' //表单value值
}]

但是这有时候会满足不了我们的需求,有时候我们需要分组的时候,我们可以根据name值的命名来进行分组多维,例如

<form id="test_form">
面板分类:<select name="面板分类"><option value="开关">开关</option><option value="插座">插座</option></select>
子项分类:<select name="子项分类-开关"><option value="单控开关">单控开关</option><option value="双控开关">双控开关</option></select>
子项分类:<select name="子项分类-插座"><option value="三孔插座">三孔插座</option><option value="五孔插座">五孔插座</option></select>
</form>

用我写的函数就可以实现如下结果

{
面板分类:"开关"
子项分类:{
开关:"单控开关",
插座:"五孔插座"
}
}

示例2:

<form action="" id="test_form3">
<input type="text" name="吊杆-规格" value="ø6">
<input type="text" name="吊杆-间距" value="">
<input type="text" name="吊杆-天宫库" value="data:JAHSHDJKAHDJFAS">
<input type="checkbox" checked="checked" name="主龙骨-值" value="true">
<input type="text" name="主龙骨-间距" value="">
</form>

返回

{
吊杆:{
规格:"ø6",
间距:"",
天宫库:"data:JAHSHDJKAHDJFAS"
},
主龙骨:{
值:"true",
间距:""
}
}

方法如下,第一个参数是表单id,第二个是是否返回json数据,第三个处理完的回调函数

/**
* --- 表单数据接收格式化 ---
* @param1 form_id* 表单id
* @param2 boolean false 是否返回json数据,默认为false
* @param3 callback 回调函数,参数是返回的obj||json, 处理完数据调用自定义方法
* @return obj||json
*/
var customSerialize = function(form, json, callback) {
var arr = $('#' + form).serializeArray();
var tmp = {};
var res2 = {};
//处理array
$.each(arr, function(k, v) {
tmp[v.name] = v.value;
});
$.each(tmp, function(k, v) {
res2[k] = v;
});
$.each(res2, function(k, v) {
var path = k.split('-');
var k2 = path.pop();
var next_node = res2;
$.each(path, function(k2, node) {
if (!next_node[node]) next_node[node] = {};
next_node = next_node[node];
});
next_node[k2] = v;
});
if (arguments[] && arguments[] == true) {
var json = JSON.stringify(res2);
if (callback) callback(json);
return json;
} else {
if (callback) callback(res2);
return res2;
}
}

用途

   在一些不用服务器需要跟js进行交互的环境中,如 ruby for sketchup 对于数据的传递非常有效

jQuery serializeArray()方法改写多维对象以及自定义的更多相关文章

  1. jQuery中serializeArray方法的使用及对象与字符串的转换

    使用jQuery中的serializeArray()方法可以方便的将表单中的各个信息,转化为多个{name:xx,value:xx}对象的数组, 再使用遍历的方式可以方便的将数组转化为json对象, ...

  2. jquery serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。

    serializeArray() 方法序列化表单元素(类似 .serialize() 方法),返回 JSON 数据结构数据. html代码: <form> <div><i ...

  3. [Web 前端 ] Jquery attr()方法 获取或修改 对象的属性值

    cp from : https://blog.csdn.net/gf771115/article/details/18086707 jquery中用attr()方法来获取和设置元素属性,attr是at ...

  4. jquery的方法总结

    1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的J ...

  5. jQuery的序列化元素 serialize()方法 serializeArray()方法 param()方法

    当提交的表单元素较多时用serialize()方法,serialize()方法也是作用于一个jQuery的对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. serialize() 方法通 ...

  6. jquery扩展方法(表单数据格式化为json对象)

    1.jquery扩展方法(表单数据格式化为json对象) <script type="text/javascript"> // 将表单数据序列化为一个json对象,例如 ...

  7. jQuery中的$.extend方法来扩展JSON对象及合并,方便调用对象方法

    $.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 例一 合并 settings 和 options,修改并返回 settings var setting ...

  8. jQuery回调、递延对象总结(下篇) —— 解密jQuery.when方法

    前言: 前一篇文章中重点总结了一下then方法,它主要用来处理多个异步任务按顺序执行,即前一个任务处理完了,再继续下一个,以此类推: 而这一章节jQuery.when方法也是处理多个异步任务,它把多个 ...

  9. jquery数组内多维对象

    jquery数组内多维对象 var postData=[],obj,list; obj = !!obj ? obj : $('#dist_meici_checkinfo_form'); obj.fin ...

随机推荐

  1. Linux 进程,线程 -- (未完)

    系统调用 Linux 将系内核的功能接口制作成系统调用, Linux 有 200 多个系统调用, 系统调用是操作系统的最小功能单元. 一个操作系统,以及基于操作系统的应用,都不能实现超越系统调用的功能 ...

  2. Microsoft Excel 自动取数据库数据

    1.下载安装mysql-connector-odbc-5.1.5-win32.msi 2.打开控制面板.搜索数据 3.点击添加→MySQL ODBC 5.1 Driver→完成 4.填写名称.IP地址 ...

  3. GitHub:多人协作下的分支处理

    GitHub上的团队协作 远程信息 git remote:查看远程库的信息 git remote -v:查看远程库的详细信息 推送分支 git push origin 要推送的分支:比如git pus ...

  4. 【Android Developers Training】 79. 连接到网络

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  5. 7.java的请求转发和请求重定向

    1.请求重定向:是客户端的行为,response.sendRedirect(),从本质上讲等同于两次请求,前一次的请求对象不会保存,地址栏的URL地址会改变,一次新的转发. 2.请求转发:是服务器的行 ...

  6. PHP实现简单的评论与回复功能还有删除信息

    我们首先先看一下功能 上面黑色的是评论的下面红色的字体是回复的 再来看看怎么实现的 1.发布评论 <form action="pinglunchili.php" method ...

  7. 第一章:pip 安装 tar.gz 结尾的文件 和 .whl 结尾的文件

    1. 假如后缀中还有 .tar.gz 的文件通过 pip 命令进行安装步骤. .单击 .tar.gz结尾的文件,并且对文件进行解压,进入到解压目录中,通过python命令进行安装. 命令如下:在dos ...

  8. document.querySelectorAll() 与document.getElementTagName() 的区别

    这个区别我估计大神都不知道,问题源于博主,细节被一个妹子发现的 事情经过是这样 <ul> <li>item</li> <li></li> & ...

  9. JanaScript数据类型

    数据类型 一.基础类型值包括:undefined.null.boolean.string.number 基础类型分别在内存中占有大小空间,它们的值保存在栈空间,我们通过按值来访问. undefined ...

  10. CharacterEncodingFilter -处理字符格式

    package com.pb.news.web.filter; import java.io.IOException;import javax.servlet.Filter;import javax. ...