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.jeasyui.com/easyui/themes/default/easyui.css">

    <link rel="stylesheet"type="text/css"href="http://www.jeasyui.com/easyui/themes/icon.css">

    <link rel="stylesheet"type="text/css"href="http://www.jeasyui.com/easyui/themes/color.css">

    <link rel="stylesheet"type="text/css"href="http://www.jeasyui.com/easyui/demo/demo.css">

    <script type="text/javascript"src="http://code.jquery.com/jquery-1.6.min.js"></script>

    <script type="text/javascript"src="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":"[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还有很多需要深入了解的,后期会结合项目总结和学习这个框架。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。