JQuery easyUI架構（一）—Json傳值，jqueryeasyui

JQuery easyUI架構（一）—Json傳值，jqueryeasyui

   

   

    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資訊

<span style="font-family:KaiTi_GB2312;"><span style="font-size:18px;"><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></span></span>

easyUI控制項

<span style="font-family:KaiTi_GB2312;"><span style="font-size:18px;"><!--表格顯示區--><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></span></span>

建立aspx檔案，寫Json串：

<span style="font-family:KaiTi_GB2312;"><span style="font-size:18px;">{   "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"}    ]}</span></span>

我們在使用Json串時，格式都是由普通的字串拼接為Json串的，需要用到逸出字元"\""對應",如

    StringstrJson ="{\"total\":5,\"rows\":[{\"firstname\":\"小小\",\"age\":\"22\",\"phone\":\"18730666152\",\"email\":\"741@qq.com\"}]}";

     剛剛接觸JqueryeasyUI還有很多需要深入瞭解的，後期會結合項目總結和學習這個架構。