.NET+jQuery+JSON实现Ajax

最新推荐文章于 2019-07-05 11:52:30 发布

AndyLee_

最新推荐文章于 2019-07-05 11:52:30 发布

阅读量636

点赞数

分类专栏： .NET

.NET 专栏收录该内容

70 篇文章 0 订阅

订阅专栏

文章转自：http://sweicheng.blog.51cto.com/508385/180264

首先，要解决的问题是使用jQuery.getJSON(url,[data],[callback])方法中url，即要获取前台处理数据的地址。因为以前有过开发GIS的经验，所以知道一般GIS的解决方案是通过调用“一般处理程序”即以.ashx结尾的文件，它实际上是通过继承IHttpHandler这个接口来实现自定义返回给客户端自定义内容的。

IHttpHandler这个接口比较简单只有一个属性和一个方法:

1using System;
2
3namespace System.Web
4{
5    public interface IHttpHandler
6    {
7        bool IsReusable { get; }
8
9        void ProcessRequest(HttpContext context);
10     }
11}

其中ProcessRequest(HttpContext context)这个方法是我们关心的。在我们的.ashx文件中，我们就是要实现自已的ProcessRequest(HttpContext contex)，用它来给客户端返回前端数据。

第二个要解决的问题是C#的数据结构和javascript是完全不同的，所以C#的数据要返回给javascript处理，必须的找个桥梁。这里有两个选择：1.xml;2.JSON。因为这里只是简单的应用实现，所以我选择的是相对简单的JSON。

方案已定，下面在自己的.ashx文件中可以这么实现ProcessRequest(HttpContext contex)方法：

1        public void ProcessRequest(HttpContext context)
2        {
3             context.Response.ContentType = "text/plain";
4            string data = "[{name:\"fan\",age:26},{name:\"wang\",age:25}]";//构建的json数据
5            //下面两句是用来测试前台向此页面发出的查询字符
6             context.Response.Write(data);
7         }
8

OK，后台的部分完成，剩下的就简单很多，在前台页面中请求这个.ashx即可：

Code

<script language="javascript" type="text/javascript" src="jquery-1.2.3.js"></script>
<script language="javascript" type="text/javascript">
   $(document).ready(function(){
     $.getJSON(
    "AjaxHandler.ashx",//产生JSON数据的服务端页面
   //对返回的JSON数据进行处理，本例以列表的形式呈现
    function(json){
   //循环取json中的数据,并呈现在列表中
//    debugger;
     $.each(json,function(i){
     $("#cat-list").append("<li>name:"+json[i].name+"  Age:"+json[i].age+"</li>")
     })
     });
   });
</script>
<div id="categories">
<h3 title="选择一个分区"><span>选择</span></h3> 
<ul id="cat-list"></ul>
</div>