借牛人代码一用 ， 加载数据: 结合Jquery插件获取Json数据----------jTemplates

<% @ Page Language = " C# "  AutoEventWireup = " true "  Codebehind = " Default.aspx.cs "  Inherits = " JsonDemo._Default "   %>

<! 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 runat = " server " >
     < title > Demo </ title >
</ head >
< body >
     < form id = " form1 "  runat = " server " >
         < div id = " ClickBox " >
             < input id = " ClickMeToo "  type = " button "  value = " Click Me! "   />
         </ div >
         < ul id = " InfoBox " >
         </ ul >
     </ form >
     <%-- 模板内容即HTML用什么规则生成。要用到模板的地方一般都是循环的 --%>
     < textarea id = " ItemTemplate "  style = " display: none; " >
        {# foreach  $T.table  as  record}
             < li >< a title = " id={$T.record.ID} "  href = " {$T.record.ID} " > {$T.record.Title} </ a ></ li >
        {# / for }
     </ textarea >
</ body >
</ html >

< script type = " text/javascript "  src = " JS/jquery-1.3.2.min.js " >   </ script >

<%-- 模板 --%>
< script src = " JS/jTemplate.js "  type = " text/javascript " ></ script >

< script type = " text/javascript " >
        $(function(){
            $( ' input#ClickMeToo ' ).click(function(){
                $( ' #InfoBox ' ).html( ' <li>Loading</li> ' );
                 fnLoadJsonHTML();
            });  // click
            
        });
       function fnLoadJsonHTML(){
            $.ajax({
                async:  true ,  //  默认true(异步请求)
                cache:  false ,  //  默认true,设置为 false 将不会从浏览器缓存中加载请求信息。----------这个地方必须设置为fasle，否则在IE下会因为缓存的关系读取脏数据。实现不缓存的方法就是它自己给URL加了个随机参数
                type:  " GET " ,  //  默认:GET 请求方式:[POST/GET]
                dataType:  " json " ,  // 默认["xml"/"html"] 返回数据类型:["xml" / "html" / "script" / "json" / "jsonp"]
                url:  " Data/SampleData.ashx " ,  //  默认当前地址,发送请求的地址
                data: { t: ' json '  },  //  请求的参数
                error: function() { 
                    alert( " There is an Error. " );
                }, 
                timeout:  20000 , // 超时时间
                success: function(data) {  //  请求成功后回调函数 参数：服务器返回数据,数据格式.
                
                     if ( ! data.Error  ){ // 这个地方要判断data是否正确                    
                         // 相当于data = [{ID:10,Title:'第1个标题'},{ID:20,Title:'第2个标题'},{ID:30,Title:'第3个标题'},{ID:40,Title:'第4个标题'},{ID:50,Title:'第5个标题'},{ID:60,Title:'第6个标题'},{ID:70,Title:'第7个标题'},{ID:80,Title:'第8个标题'},{ID:90,Title:'第9个标题'},{ID:100,Title:'第10个标题'}]; 
                         //  $("#InfoBox") 表示要被插入InnerHTML的元素
                         //  ItemTemplate 表示包含模板InnerHTML的元素的ID
                         // setTemplateElement函数：将模板设置给对象
                        $( " #InfoBox " ).setTemplateElement( " ItemTemplate " );
                        
                         // 往模板里发送数据，数据解析在模板里
                        // 如果要分页，就把data这个数组截取要当前页显示的部分传入即可（data需要用全局变量保存）
                        $( " #InfoBox " ).processTemplate(data.solidDate);
                   } else {
                        alert(data.ErrorMsg);
                   }
                }
            })
       }
</ script >

using  System;
using  System.Data;
using  System.Web;
using  System.Collections;
using  System.Web.Services;
using  System.Web.Services.Protocols;
using  Newtonsoft.Json;

namespace  JsonDemo.Data
{
    /**//// <summary>
    /// Summary description for $codebehindclassname$
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class SampleData : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            //设置输出格式
            context.Response.ContentType = "text/json";
            context.Response.Charset = "utf-8";

            context.Response.Write(GetToJsonData());
            context.Response.End();
        }
        private string GetSolidData()
        {
            //JSON格式的数据。
            return "{solidDate:[{ID:10,Title:'第1个标题'},{ID:20,Title:'第2个标题'},{ID:30,Title:'第3个标题'},{ID:40,Title:'第4个标题'},{ID:50,Title:'第5个标题'},{ID:60,Title:'第6个标题'},{ID:70,Title:'第7个标题'},{ID:80,Title:'第8个标题'},{ID:90,Title:'第9个标题'},{ID:100,Title:'第10个标题'}],Error:false,ErrorMsg:null}";
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}