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

再使用遍历的方式可以方便的将数组转化为json对象,

代码如下

<p id="results"><b>Results: </b> </p>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2" checked="checked"/> check2
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
</form>
<script type="text/javascript">
//其中的serialize()方法将表单信息转化为以&连接的字符串,和提交的信息类似,感觉用处不大
$("#results").append("<tt>"+$("form").serialize()+"</tt>").append("<br/>"+$("form").serializeArray());
//但是serializeArray方法会生成键值对的数组对象,再放到json对象中,使用起来就很方便了
var fields = $("form").serializeArray();
var f = {};//声明一个对象
$.each(fields,function(index,field){
f[field.name] = field.value;//通过变量,将属性值,属性一起放到对象中
})
//等遍历结束,就会生成一个json对象了 //如果需要对象与字符串的转换
//这是从json对象 向 json 字符串转换
var str = JSON.stringify(f);
alert(str); //这是将字符串 向 对象转换
var objectStr = JSON.parse(str);
alert(objectStr); </script>

  生成的json可以传送到服务器,再使用插件直接转化成Javabean对象,使用起来会非常方便,因为省去了繁琐的提取操作语句

如果需要对象与字符串的转换,可以使用多种方法,除了代码中的方法,另外还有两种字符串转对象的方式

jQuery中的$.parseJSON(str) 可把字符串转成对象。。

另外就是js中熟悉的eval方法了,将字符串转化为对象eval('('+str+')');

jQuery中serializeArray方法的使用及对象与字符串的转换的更多相关文章

  1. jQuery中attr()方法用法实例

    本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...

  2. 使用jquery中height()方法获取各种高度大全

    alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(docum ...

  3. 锋利的jQuery读书笔记---jQuery中Ajax--load方法

    第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  4. 关于Jquery中ajax方法data参数用法的总结

    data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...

  5. jQuery中的方法

    jQuery中的方法来操作HTML标签中的属性 attr(name)    获取当前对象的指定的属性的值 attr(key,value)  给当前对象设置属性值 attr(properties)  一 ...

  6. 解析jQuery中extend方法--源码解析以及递归的过程《二》

    源码解析 在解析代码之前,首先要了解extend函数要解决什么问题,以及传入不同的参数,会达到怎样的效果.extend函数内部处理传入的不同参数,返回处理后的对象. extend函数用来扩展对象,增加 ...

  7. jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...

  8. jQuery中index()方法用法实例

    本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值.索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值 ...

  9. jQuery中on()方法用法实例

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...

随机推荐

  1. 如何修复和检测Windows系统漏洞

    本文为<如何给系统打补丁(知识篇)>一文实战文章.   本文出自 "李晨光原创技术博客" 博客,谢绝转载!

  2. 【Thinkphp学习】TP3.2.3在PHP5.5环境下运行非常慢

    在做项目时遇到了一个瓶颈问题:老项目迁移到PHP5.5环境后打开网页很卡很慢. 服务器环境为:apache+php5.5.38+mysql,使用框架为Thinkphp3.2.3. 经过多方面排查找到了 ...

  3. numpy_basic

    一.Numpy是什么 Numerical Python,数值的Python,补充了Python语言所欠缺的数值计算能力. Numpy是其它数据分析及机器学习库的底层库. Numpy完全标准C语言实现, ...

  4. Elasticsearch入门系列~通过Java一系列操作Elasticsearch

    Elasticsearch索引的创建.数据的增删该查操作 上一章节已经在Linux系统上安装Elasticsearch并且可以外网访问,这节主要通过Java代码操作Elasticsearch 1.创建 ...

  5. AutoCAD 出现“安全系统(软件锁许可管理器)不起作用或未正确安装”的解决方法

    感谢高飞鸟提供解决方案.当AutoCAD或自动桌子公司的其它产品在启动过程中突然停电或其它原因造成操作系统重启时,可能会造成这些产品的许可出错而无法再运行.一般出错后第一次进入时,会提示你“产品需要激 ...

  6. 【例题 7-3 UVA - 10976】Fractions Again?!

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] x>=y => \(\frac{1}{x}<=\frac{1}{y}\) => \(\frac{1}{x}= ...

  7. [置顶] WebService学习总结(1)——WebService相关概念

    一.序言 大家或多或少都听过 WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成 分.但是不得不承认的是W ...

  8. Java核心技术 卷Ⅰ 基础知识(3)

    第五章 继承 继承已存在的类就是复用这些类的方法和域.反射是指在程序运行期间发现更多的类及其属性的能力. . 反射 . 使用反射编写泛型数组代码 继承设计的技巧

  9. js里的表格数组某个key去重

    如Elemgnt的table绑定的数据要某个key是唯一的 var myarry = [ {name: 'liuyang',age :13}, {name:'jike',age:15}, {name: ...

  10. Java Callable Future Example(java 关于Callable,Future的例子)

    Home » Java » Java Callable Future Example Java Callable Future Example April 3, 2018 by Pankaj 25 C ...