jQuery解析JSON数据


JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，而且它是基于JavaScript 的。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript 等）。这些特性使JSON成为理想的数据交换语言
   JSON有两种结构：
 ①“名/值”对的集合（A collection of name/value pairs）。在不同的语言中，它被理解为对象，结构，关联数组等
②值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组。   JSON数据有严格的格式，只有按照这个格式，才可以进行有效的解析   JSON表示名称/值对：
{ "firstName": "Brett" }
   多个名称/值对串在一起:
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }
 从语法方面来看，这与名称/值对相比并没有很大的优势，www.bkjia.com但是在这种情况下 JSON
更容易使用，而且可读性更好
当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性:
{ “employees": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
] }     Juqery解析JSON数据   例子一：   ①建立.ashx文件。 /// <summary>
    /// $codebehindclassname$ 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class JsonHandler : IHttpHandler
    {         public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string data = "[{name:\"Tom\",age:\"26\"},{name:\"Jim\",age:\"27\"}]";
            context.Response.Write(data);
        }         public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }   ②前台解析JSON数据 <head runat="server">
    <title></title>     <script src="js/jquery-1.3.2.js" type="text/javascript"></script>     <script type="text/javascript">
        $(function() {
            $.getJSON(
        "JsonHandler.ashx",
         function(data) {
             $.each(data, function(i) {
                 $("#cat-list").append("<li>name:" + data[i].name + "&nbsp; Age:" + data                  [i].age+ "</li>")
             });
         });
        });  
    </script> </head>
<body>
    <form id="form1" runat="server">
    <div>
    <ul id="cat-list"></ul>
    </div>
    </form>
</body>     例子二：   ①建立页面处理后台，.aspx public partial class AutoDB2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            StringBuilder str = new StringBuilder();
            string strCon = @"Data Source=.\SQLEXPRESS;Initial                                   Catalog=TeacherFiles;User ID=sa;pwd=as";
            SqlConnection con = new SqlConnection(strCon);
            string sql = string.Format("select TeacherNum,TeacherName from                                TeacherBasicInformation");
            SqlDataAdapter sda = new SqlDataAdapter(sql, con);
            DataTable dt = new DataTable();
            sda.Fill(dt);             foreach (DataRow dr in dt.Rows)
            {
                str.AppendFormat                ("{{name:\"{0}\",value:\"{1}\"}},", dr["TeacherName"], dr["TeacherNum"]);
            }             Response.Write("[" + str.ToString().TrimEnd(',') + "]");
            Response.End();
        }
    }   ②前台解析JSON数据 <head runat="server">
    <title></title>     <script type="text/javascript" src="js/jquery-1.3.2.js"></script>     <script type="text/javascript" src="js/jquery.autocomplete.js"></script>     <link rel="Stylesheet" href="css/jquery.autocomplete.css" type="text/css" />     <script type="text/javascript">
        $(function() {
            $.getJSON(
            "AutoDB2.aspx", function(data) {
            $("#txt").autocomplete(data, {
                 minChars: 0,                            //cacheLength: 1,                      //multiple: true,                     matchContains: true,                     autoFill: false,                       mustMatch: true,                        //delay: 100,                            formatItem: function(row, i, max) {
                    return i + "/" + max + ": \"" + row.name + "\" [" + row.value + "]";
                }
                ,
                formatMatch: function(row, i, max) {
                  return row.name+" "+row.value;
                }
                ,
                formatResult: function(row) {
                  return row.name;
                }
                });
            });
        });         $(function() {
        function findValueCallback(event, data, formatted) {
            $("#content").html("<strong>" + (!data ? "无匹配项!" : "Selected: " + formatted)               + "</strong>");
        }         $("#txt").result(findValueCallback);
        $("#btngetvalue").click(function() { $("#txt").search(); });
        });
    </script> </head>
<body>
    <form id="form1" runat="server">
    <div>
        示例：<input id="txt" runat="server" type="text" style="width: 50%;" />
        <input id="btngetvalue" type="button" value="Get Value" /><br /><span id="content"></span>
    </div>
    </form>
</body>

相关内容