jquery:大家一定很熟悉,就算没用过,也应该听说过,不多做介绍,不知道的赶紧google一下。
json:一种数据格式,她小巧,轻盈。在javascript的世界中,完胜XML。 jquery和json都是因为小与巧而被广泛使用,今天把她们弄到一起,大家应该没意见吧。 废话了一把,现在言归正传, 通过这篇文章你可以得到以下收获: 1.jqury如何用ajax的形式调用后台asp.net页面生成的json数据 2.jquery简单的dom操作 3.送本jquery的开发手册给大家(大家慢慢去研究) 准备工作: 首先,我们新建个网站(.net2.0就行). 1.在我们的项目中jquery的js文件。 2.新建一个htm文件,命名为dome.htm吧。 代码如下:(head区的js代码就是实现的全部代码,有详细注释) Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <title>jquery获取json数据演示页面</title> <script type="text/javascript" src="js/jquery-1.2.1.pack.js"></script> <script type="text/javascript"> function getData(){ $("#list").html("");//清空列表中的数据 //发送ajax请求 $.getJSON( "jsondata.ashx",//产生JSON数据的服务端页面 {name:"test",age:20},//向服务器发出的查询字符串(此参数可选) //对返回的JSON数据进行处理,本例以列表的形式呈现 function(json){ //循环取json中的数据,并呈现在列表中 $.each(json,function(i){ $("#list").append("<li>name:"+json[i].name+" Age:"+json[i].age+"</li>") }) }) } </script> </head> <body> <input id="Button1" type="button" value="获取数据" onclick="getData()" /> <ul id="list"></ul> </body> </html> 3.我们再建一个一般应用程序(jsonData.ashx) 代码如下: Code
<%@ 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];//取查询字符串中namer的值 string querystage = context.Request.QueryString.GetValues("age")[0];//取查询字符串中age的值 context.Response.Write(data); } public bool IsReusable { get { return false; } } } 对以上的内容我只说一点,那就是前台页面中的$.getJSON方法 $.getJSON(url, params, callback) 用一个HTTP GET请求一个JavaScript JSON数据 返回值:XMLHttpRequest 参数: url (String): 装入页面的URL地址。 params (Map): (可选)发送到服务端的键/值对参数。 callback (Function): (可选) 当数据装入完成时执行的函数. 下面贴一些运行成功的图: 1.运行结果 2,后台调试的数据: 好啦,这篇文章就写到这。 转自:http://www.cnblogs.com/leleroyn/archive/2008/06/17/1224039.html#1228623 一个tooltip 插件:使用ASP.NET AJAX让GridView的数据行显示提示框(ToolTip)
http://www.cnblogs.com/webabcd/archive/2007/05/13/744902.html 另:收藏一些不错的链接(关于jquery+json+ajax的)
ajax+json+jquery第一个mvc例子
http://hi.baidu.com/lssbing/blog/item/5d35cc4e3918380cb3de05cc.html 基于jQuery的AJAX和JSON实现纯html数据模板 http://blog.csdn.net/luq885/archive/2007/06/06/1639933.aspx 开发一个适合Ajax+JSON+jQuery环境使用的多功能页码栏——jPagerBar-1.1.1 http://www.cnblogs.com/szw/archive/2008/02/23/1078238.html .NET+jQuery+JSON实现Ajax http://sweicheng.blog.51cto.com/508385/180264 Jquery 使用json 的例子:http://www./a/200905/jQuery_JSON_.html http://www.cnblogs.com/IT-Cristian/archive/2009/06/08/1498699.html jquery+ajax+json+xml ajax解决方案(Newtonsoft.Json +jQuery +ashx) http://www.cnblogs.com/ie421/archive/2008/08/19/1271601.html http://www./archives/369 无刷新分页:http://www./CV/AjaxDataTable/ |
|