代码改变世界

Jquery与Json实现Ajax

2011-03-22 16:45  愿心平静面对  阅读(548)  评论(2)  编辑  收藏  举报

页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryAjax.aspx.cs" Inherits="JqueryAjax" %>

<!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>无标题页</title>
    <script type="text/javascript" src="JS/jquery-1.3.1.js"></script>
    <script type="text/javascript">
        function getData(){
            $("#list").html("");
            $.getJSON("jsondata.ashx",
            {name:"test",age:20},
            function(json){
                $.each(json,function(i){
                    $("#list").append("<li>name:"+json[i].name+"&nbsp;Age:"+json[i].age+"</li>")
                });
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input id="Button1" type="button" value="获取数据" onclick="getData()" />
        <ul id="list"></ul>
    </form>
</body>
</html>

处理页面jsondata.ashx

<%@ 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];//取查询字串的name值
        string querystage = context.Request.QueryString.GetValues("age")[0];//取查询字串的age值
        context.Response.Write(data);
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}