首页 > 代码库 > JQuery easyUI框架（一）—Json传值
JQuery easyUI框架（一）—Json传值
JQueryEasyUI是一组基于jQuery的UI插件集合体，而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
easyUI一般通过Json串与后台进行交互，下面具体介绍怎样使用Json。
一、Json
JSON：JavaScript 对象表示法（JavaScript ObjectNotation），用于存储和交换文本信息的语法。
类似 XML
JSON 是纯文本
JSON 具有层级结构（值中存在值）
JSON 可通过 JavaScript 进行解析
JSON 数据可使用 AJAX 进行传输
不同之处
格式简单
读写的速度更快
能够使用内建的 JavaScript eval() 方法进行解析
JSON 比 XML更小、更快，更易解析。在JS中处理XML非常不方便，json在JS中可作为对象处理
二、json格式
数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
两种表示结构：对象和数组
1、对象
对象结构用｛｝保存数据，中间部分由0或多个以”，”分隔的”key(关键字)/value(值)”对构成，关键字和值之间以”：”分隔。实例：
{
姓名:小小,
年龄:23,
...
}
关键字是字符串，而值可以是字符串，数值，true,false,null,对象或数组
2、数组
数组结构以[]保存数据。中间由”，”分隔，实例
[
{
age：12,
sex:女
},
{
age：13,
sex:男
}
]
三、JSON串和JSON对象
JSON字符串:指的是符合json格式要求的js字符串
var str1 = “{ "name": "cxh", "sex":"man" }”;
JSON对象:指符合json格式要求的js对象。
var str2 = { "name": "cxh", "sex":"man" };
四、JS中读写JSON
JSON是JS的一个子集。读和写JSON都有两种方法，分别是利用”.”操作符和“[key]”的方式。
例如： var obj
Obj.sex
Obj.[“sex”]
五、使用JSON
1、对象转为JSON串
（1）通过序列化将.net对象转换为JSON字符串
我们从数据库中查询到的数据(一般为一个集合，列表或数组等)转换为JSON格式字符串传回客户端，需要我们将普通的字符串转换为Json格式，这里用到的是JsonConvert对象的SerializeObject方法。
（2）使用LINQ to JSON定制JSON数据
SerializeObject只是简单地将一个list或集合转换为json字符串。对数据格式有一定要求的，需要用到JSON.NET的LINQto JSON，LINQ to JSON的作用就是根据需要的格式来定制json数据。
网上还介绍到了
使用toJSONString()或者全局方法JSON.stringify()将JSON对象转化为JSON字符串，来自json.js包。
2、Json串转为json对象
（1）使用eval()函数 var obj = eval(‘(‘ + str + ‘)‘);
（2）使用parse方法 var obj = JSON.parse(str);
服务端，由.net对象转换json字符串优先使用JsonConvert对象的SerializeObject方法，定制输出json字符串使用LINQto JSON。由json字符串转换为.net对象优先使用JsonConvert对象的DeserializeObject方法，然后也可以使用LINQ toJSON。
六、 eval()函数和json解析器
eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript对象。必须把文本包围在括号中，这样才能避免语法错误：
使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON文本，而不会编译脚本。在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。
七、easyUI+Json传值实例
需要引用的easyUI信息
<head>
<meta charset="UTF-8">
<title>easyUI显示数据</title>
<!--需要引用的文件-->
<link rel="stylesheet"type="text/css"href=http://www.mamicode.com/"http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet"type="text/css"href=http://www.mamicode.com/"http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet"type="text/css"href=http://www.mamicode.com/"http://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet"type="text/css"href=http://www.mamicode.com/"http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript"src=http://www.mamicode.com/"http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript"src=http://www.mamicode.com/"http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
easyUI控件
<!--表格显示区-->
<body>
<h2>基本信息</h2>
<table id="dg" title="用户" class="easyui-datagrid"style="width:700px;height:250px"
url="json.aspx"
toolbar="#toolbar"pagination="true"
rownumbers="true"fitColumns="true" singleSelect="true">
<!--表格标题-->
<thead>
<tr>
<thfield="firstname" width="50">姓名</th>
<th field="age"width="50">年龄</th>
<th field="phone"width="50">电话</th>
<th field="email"width="50">邮箱</th>
</tr>
</thead>
</table>
<!--添加、修改、删除用户命名-->
<div id="toolbar">
<ahref="javascript:void(0)" class="easyui-linkbutton"data-options="iconCls:‘icon-add‘" plain="true"onclick="newUser()">添加</a>
<ahref="javascript:void(0)" class="easyui-linkbutton"iconCls="icon-edit" plain="true"onclick="editUser()">修改</a>
<ahref="javascript:void(0)" class="easyui-linkbutton"iconCls="icon-remove" plain="true"onclick="destroyUser()">删除</a>
</div>
<!--添加用户-->
<div id="dlg"class="easyui-dialog"style="width:400px;height:280px;padding:10px 20px"
closed="true"buttons="#dlg-buttons">
<divclass="ftitle">用户信息</div>
<form id="fm"method="post" novalidate>
<div class="fitem">
<label>姓名:</label>
<inputname="firstname" class="easyui-textbox"required="true">
</div>
<div class="fitem">
<label>年龄:</label>
<input name="age"class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>电话:</label>
<inputname="phone" class="easyui-textbox">
</div>
<div class="fitem">
<label>邮箱:</label>
<inputname="email" class="easyui-textbox"validType="email">
</div>
</form>
</div>
</body>
</html>
新建aspx文件，写Json串：
{
"total":3,
"rows":[
{"firstname":"张三","age":"23","phone":"18736669861","email":"gxq74171234@163.com"},
{"firstname":"小小","age":"33","phone":"18736669861","email":"gxq74171234@163.com"},
{"firstname":"小银","age":"22","phone":"18736669861","email":"gxq74171234@163.com"}
]
}
我们在使用Json串时，格式都是由普通的字符串拼接为Json串的，如
StringstrJson ="{\"total\":5,\"rows\":[{\"firstname\":\"小小\",\"age\":\"22\",\"phone\":\"18730666152\",\"email\":\"741@qq.com\"}]}";
刚刚接触JqueryeasyUI还有很多需要深入了解的，后期会结合项目总结和学习这个框架。
JQuery easyUI框架（一）—Json传值