jquery操作json的例子

jquery :大家一定很熟悉，就算没用过，也应该听说过，不多做介绍，不知道的赶紧google一下。
json :一种数据格式，她小巧，轻盈。在javascript的世界中，完胜XML。
jquery和json都是因为小与巧而被广泛使用，今天把她们弄到一起，大家应该没意见吧。

废话了一把，现在言归正传，
通过这篇文章你可以得到以下收获：
1.jqury如何用ajax的形式调用后台asp.net页面生成的json数据
2.jquery简单的dom操作
3.送本jquery的开发手册给大家（大家慢慢去研究）

准备工作：
首先，我们新建个网站（.net2.0就行）.
1.在我们的项目中jquery的js文件。
2.新建一个htm文件，命名为dome.htm吧。
代码如下：（head区的js代码就是实现的全部代码，有详细注释）

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

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title > jquery获取json数据演示页面 </ title >
     < script  type ="text/javascript"  src ="js/jquery-1.2.1.pack.js" ></ script >
     < script  type ="text/javascript" >
     function  getData() {
    $( " #list " ).html( "" ); // 清空列表中的数据
    // 发送ajax请求
    $.getJSON(
     " jsondata.ashx " , // 产生JSON数据的服务端页面
     {name: " test " ,age: 20 } , // 向服务器发出的查询字符串（此参数可选）
    // 对返回的JSON数据进行处理，本例以列表的形式呈现
     function (json) {
    // 循环取json中的数据,并呈现在列表中
    $.each(json, function (i) {
    $( " #list " ).append( " <li>name: " + json[i].name + " &nbsp; Age: " + json[i].age + " </li> " )
    } )
    } )
    }
     </ script >
</ head >
< body >
     < input  id ="Button1"  type ="button"  value ="获取数据"  onclick ="getData()"   />
    < ul  id ="list" ></ ul >
</ body >
</ html >

3.我们再建一个一般应用程序（jsonData.ashx）
代码如下：

Code
<% @ WebHandler Language = " C# "  Class = " jsonData "   %>

using  System;
using  System.Web;

public   class  jsonData : IHttpHandler  {
    
     public   void  ProcessRequest (HttpContext context)  {
        context.Response.ContentType  =   " text/plain " ;
         string  data  =   " [{name:/ " ants/ " ,age:24},{name:/ " lele/ " ,age:23}] " ; // 构建的json数据
        // 下面两句是用来测试前台向此页面发出的查询字符
         string  querystrname  =  context.Request.QueryString.GetValues( " name " )[ 0 ]; // 取查询字符串中namer的值
         string  querystage  =  context.Request.QueryString.GetValues( " age " )[ 0 ]; // 取查询字符串中age的值
        
        context.Response.Write(data);
    }
 
     public   bool  IsReusable  {
         get   {
             return   false ;
        }
    }

}

对以上的内容我只说一点，那就是前台页面中的$.getJSON方法  

$.getJSON(url, params, callback)
用一个HTTP GET请求一个JavaScript JSON数据
返回值： XMLHttpRequest
参数：
url (String): 装入页面的URL地址。
params (Map): （可选）发送到服务端的键／值对参数。
callback (Function): （可选） 当数据装入完成时执行的函数. 

下面贴一些运行成功的图:
1.运行结果

2，后台调试的数据：


好啦，这篇文章就写到这。
附上jquery的开发手册：jqueryapi12.rar （这个手册本身就是基于jquery做的，，很漂亮）
文字显得有点啰嗦，应该没走题，请大家给个及格分啦，