<%@ 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>
<!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; } } }
}