.NET+jQuery+JSON实现Ajax
2014-09-26 10:34
363 查看
文章转自:http://sweicheng.blog.51cto.com/508385/180264
首先,要解决的问题是使用jQuery.getJSON(url,[data],[callback])方法中url,即要获取前台处理数据的地址。因为以前有过开发GIS的经验,所以知道一般GIS的解决方案是通过调用“一般处理程序”即以.ashx结尾的文件,它实际上是通过继承IHttpHandler这个接口来实现自定义返回给客户端自定义内容的。
IHttpHandler这个接口比较简单只有一个属性和一个方法:
其中ProcessRequest(HttpContext context)这个方法是我们关心的。在我们的.ashx文件中,我们就是要实现自已的ProcessRequest(HttpContext contex),用它来给客户端返回前端数据。
第二个要解决的问题是C#的数据结构和javascript是完全不同的,所以C#的数据要返回给javascript处理,必须的找个桥梁。这里有两个选择:1.xml;2.JSON。因为这里只是简单的应用实现,所以我选择的是相对简单的JSON。
方案已定,下面在自己的.ashx文件中可以这么实现ProcessRequest(HttpContext contex)方法:
OK,后台的部分完成,剩下的就简单很多,在前台页面中请求这个.ashx即可:
Code
首先,要解决的问题是使用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>
相关文章推荐
- asp.net :使用jquery 的ajax +WebService+json 实现无刷新去后台值
- asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)
- asp.net中利用Jquery+Ajax+Json实现无刷新分页
- asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)
- asp.net ajax实现:Jquery+Json
- 黑马程序员_学习日记73_725ASP.NET(禁用Cookie、ASP.NET中的重要对象、JavaScript实现AJAX、两种Json格式的序列化方法、JQuery中实现ajax的五种方法)
- asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
- asp.net ajax实现(—):Jquery+Json
- asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
- asp.net :使用jquery 的ajax +WebService+json 实现无刷新去后台值
- asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)
- 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
- asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
- asp.net中利用Jquery+Ajax+Json实现无刷新分页
- .NET+jQuery+JSON实现Ajax
- asp.net ajax实现(—):Jquery+Json
- .Net+C#+Jquery实现Ajax的json应用。解决parsererror错误
- asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)
- asp.net中利用Jquery+Ajax+Json实现无刷新分页
- asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码