Extjs中Json的应用

目标：

      了解什么是Json

       理解json的语法及格式

       在vs中应用json

内容：

JSON 为一种更轻、更友好的 Web services客户端的格式（多采用浏览器的形式或访问 REST风格 Web服务的Ajax应用程序的形式）

JSON和XML一样也是一种简单文本格式。相对于XML，它更加易读、更便于肉眼检查。在语法的层面上，JSON与其他格式的区别是在于分隔数据的字符，JSON中的分隔符限于单引号、小括号、中括号、大括号、冒号和逗号

代码

   
     

    
      
    
       1 
    
      <%
    
      @ Page Language
    
      =
    
      "
    
      C#
    
      "
    
       AutoEventWireup
    
      =
    
      "
    
      true
    
      "
    
       CodeBehind
    
      =
    
      "
    
      Ext3.aspx.cs
    
      "
    
       Inherits
    
      =
    
      "
    
      EXT1.Ext3
    
      "
    
       
    
      %>
    
      

    
       2 
    
      

    
       3 
    
      
    
      <!
    
      DOCTYPE html PUBLIC 
    
      "
    
      -//W3C//DTD XHTML 1.0 Transitional//EN
    
      "
    
       
    
      "
    
      http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
    
      "
    
      >
    
      

    
       4 
    
      

    
       5 
    
      
    
      <
    
      html xmlns
    
      =
    
      "
    
      http://www.w3.org/1999/xhtml
    
      "
    
       
    
      >
    
      

    
       6 
    
      
    
      <
    
      head runat
    
      =
    
      "
    
      server
    
      "
    
      >
    
      

    
       7 
    
       
    
      <
    
      title
    
      >
    
      第三课，Json应用
    
      </
    
      title
    
      >
    
      

    
       8 
    
       
    
      <
    
      link href
    
      =
    
      "
    
      ext-3.2.0/resources/css/ext-all.css
    
      "
    
       rel
    
      =
    
      "
    
      stylesheet
    
      "
    
       type
    
      =
    
      "
    
      text/css
    
      "
    
       
    
      />
    
      

    
       9 
    
       
    
      <
    
      script src
    
      =
    
      "
    
      ext-3.2.0/adapter/ext/ext-base.js
    
      "
    
       type
    
      =
    
      "
    
      text/javascript
    
      "
    
      ></
    
      script
    
      >
    
      

    
      10 
    
       
    
      <
    
      script src
    
      =
    
      "
    
      ext-3.2.0/ext-all.js
    
      "
    
       type
    
      =
    
      "
    
      text/javascript
    
      "
    
      ></
    
      script
    
      >
    
      

    
      11 
    
      
    
      </
    
      head
    
      >
    
      

    
      12 
    
      
    
      <
    
      body
    
      >
    
      

    
      13 
    
       
    
      <
    
      form id
    
      =
    
      "
    
      form1
    
      "
    
       runat
    
      =
    
      "
    
      server
    
      "
    
      >
    
      

    
      14 
    
       
    
      <
    
      div id
    
      =
    
      "
    
      id1
    
      "
    
      >
    
      

    
      15 
    
       
    
      <
    
      script type
    
      =
    
      "
    
      text/javascript
    
      "
    
      >
    
      

    
      16 
    
       Ext.MessageBox.buttonText.yes
    
      =
    
      "
    
      是
    
      "
    
      ;

    
      17 
    
       Ext.MessageBox.buttonText.no
    
      =
    
      "
    
      否
    
      "
    
      ;

    
      18 
    
       

    
      19 
    
       var json
    
      =
    
      {

    
      20 
    
       Name:
    
      "
    
      陈建强
    
      "
    
      ,

    
      21 
    
       Sex:
    
      "
    
      男
    
      "
    
      ,

    
      22 
    
       Age:
    
      26
    
      ,

    
      23 
    
       Married:
    
      false
    
      ,

    
      24 
    
       Marks:[

    
      25 
    
       { name:
    
      "
    
      语文
    
      "
    
      ,Mark:
    
      90
    
      },

    
      26 
    
       { name:
    
      "
    
      数学
    
      "
    
      ,Mark:
    
      98
    
      }

    
      27 
    
       ],

    
      28 
    
       Address:{

    
      29 
    
       City:
    
      "
    
      武汉
    
      "
    
      ,

    
      30 
    
       Street:
    
      "
    
      光谷大道
    
      "
    
      

    
      31 
    
       }

    
      32 
    
       }

    
      33 
    
       function Read() {

    
      34 
    
       var ShowMsg
    
      =
    
      {

    
      35 
    
       title:
    
      "
    
      Json应用
    
      "
    
      ,

    
      36 
    
       msg:
    
      "
    
      <font color='red'>用户名:
    
      "
    
      +
    
      json.Name
    
      +
    
      "
    
      </font>
    
      "
    
      +
    
      '
    
      \n
    
      '
    
      +
    
      "
    
      年龄:
    
      "
    
      +
    
      json.Age
    
      +
    
      "
    
      数学成绩:
    
      "
    
      +
    
      json.Marks[
    
      1
    
      ].Mark

    
      37 
    
       
    
      +
    
      "
    
      所在地址:
    
      "
    
      +
    
      json.Address.City
    
      +
    
      json.Address.Street,

    
      38 
    
       buttons:Ext.Msg.YESNO,

    
      39 
    
       icon:Ext.Msg.INFO,

    
      40 
    
       width:
    
      300
    
      ,

    
      41 
    
       animEl:id1,

    
      42 
    
       closable:
    
      true
    
      

    
      43 
    
       }

    
      44 
    
       Ext.Msg.show(ShowMsg);

    
      45 
    
       }

    
      46 
    
       

    
      47 
    
       Ext.onReady(Read);

    
      48 
    
       
    
      </
    
      script
    
      >
    
      

    
      49 
    
       
    
      </
    
      div
    
      >
    
      

    
      50 
    
       
    
      </
    
      form
    
      >
    
      

    
      51 
    
      
    
      </
    
      body
    
      >
    
      

    
      52 
    
      
    
      </
    
      html
    
      >
   
     

查看运行效果：

总结：

      本课程主要介绍了json的语法和在extjs中的应用，同时也回顾了第一课中对话框的使用

      可以这样理解json:他是以键和值的形式成对出现的{键:值}，其中值可以是可以是一个基本数据类型也可以是一个复杂对象