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={ "name": "cxh", "sex":"man" };

           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信息

easyUI控件

    
基本信息
 

   

    姓名

                


   

     

     


            


                
年龄

                
电话

                
邮箱

            

        

    

   

    

    


        添加

        修改

        删除

    

   

    

    


        用户信息

        


            


                姓名:

                

            

            


                年龄:

                

            

            


                电话:

                

            

            


                邮箱:

                

            

        

    

新建aspx文件，写Json串：

{

   "total":3,

    "rows":[

    {"firstname":"张三","age":"23","phone":"18736669861","email":"[email protected]"},

    {"firstname":"小小","age":"33","phone":"18736669861","email":"[email protected]"},

    {"firstname":"小银","age":"22","phone":"18736669861","email":"[email protected]"}

    ]

}

我们在使用Json串时，格式都是由普通的字符串拼接为Json串的，需要用到转义字符"\""对应",如

    StringstrJson ="{\"total\":5,\"rows\":[{\"firstname\":\"小小\",\"age\":\"22\",\"phone\":\"18730666152\",\"email\":\"[email protected]\"}]}";

     刚刚接触JqueryeasyUI还有很多需要深入了解的，后期会结合项目总结和学习这个框架。