|
jquery:大家一定很熟悉，就算沒用過，也應(yīng)該聽說過，不多做介紹，不知道的趕緊google一下。
json:一種數(shù)據(jù)格式，她小巧，輕盈。在javascript的世界中，完勝XML。 jquery和json都是因?yàn)樾∨c巧而被廣泛使用，今天把她們弄到一起，大家應(yīng)該沒意見吧。  廢話了一把，現(xiàn)在言歸正傳， 通過這篇文章你可以得到以下收獲： 1.jqury如何用ajax的形式調(diào)用后臺(tái)asp.net頁面生成的json數(shù)據(jù) 2.jquery簡(jiǎn)單的dom操作 3.送本jquery的開發(fā)手冊(cè)給大家（大家慢慢去研究） 準(zhǔn)備工作： 首先，我們新建個(gè)網(wǎng)站（.net2.0就行）. 1.在我們的項(xiàng)目中jquery的js文件。 2.新建一個(gè)htm文件，命名為dome.htm吧。 代碼如下：（head區(qū)的js代碼就是實(shí)現(xiàn)的全部代碼，有詳細(xì)注釋）  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數(shù)據(jù)演示頁面</title> <script type="text/javascript" src="js/jquery-1.2.1.pack.js"></script> <script type="text/javascript"> function getData(){ $("#list").html("");//清空列表中的數(shù)據(jù) //發(fā)送ajax請(qǐng)求 $.getJSON( "jsondata.ashx",//產(chǎn)生JSON數(shù)據(jù)的服務(wù)端頁面 {name:"test",age:20},//向服務(wù)器發(fā)出的查詢字符串（此參數(shù)可選） //對(duì)返回的JSON數(shù)據(jù)進(jìn)行處理，本例以列表的形式呈現(xiàn) function(json){ //循環(huán)取json中的數(shù)據(jù),并呈現(xiàn)在列表中 $.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="獲取數(shù)據(jù)" onclick="getData()" /> <ul id="list"></ul></body></html>3.我們?cè)俳ㄒ粋€(gè)一般應(yīng)用程序（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}]";//構(gòu)建的json數(shù)據(jù) //下面兩句是用來測(cè)試前臺(tái)向此頁面發(fā)出的查詢字符 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; } }}對(duì)以上的內(nèi)容我只說一點(diǎn)，那就是前臺(tái)頁面中的$.getJSON方法 $.getJSON(url, params, callback) 用一個(gè)HTTP GET請(qǐng)求一個(gè)JavaScript JSON數(shù)據(jù) 返回值：XMLHttpRequest 參數(shù)： url (String): 裝入頁面的URL地址。 params (Map): （可選）發(fā)送到服務(wù)端的鍵／值對(duì)參數(shù)。 callback (Function): （可選） 當(dāng)數(shù)據(jù)裝入完成時(shí)執(zhí)行的函數(shù). 下面貼一些運(yùn)行成功的圖: 1.運(yùn)行結(jié)果 2，后臺(tái)調(diào)試的數(shù)據(jù)： 好啦，這篇文章就寫到這。 轉(zhuǎn)自：http://www.cnblogs.com/leleroyn/archive/2008/06/17/1224039.html#1228623 一個(gè)tooltip 插件：使用ASP.NET AJAX讓GridView的數(shù)據(jù)行顯示提示框（ToolTip）
http://www.cnblogs.com/webabcd/archive/2007/05/13/744902.html 另：收藏一些不錯(cuò)的鏈接（關(guān)于jquery+json+ajax的）
ajax+json+jquery第一個(gè)mvc例子
http://hi.baidu.com/lssbing/blog/item/5d35cc4e3918380cb3de05cc.html 基于jQuery的AJAX和JSON實(shí)現(xiàn)純html數(shù)據(jù)模板 http://blog.csdn.net/luq885/archive/2007/06/06/1639933.aspx 開發(fā)一個(gè)適合Ajax+JSON+jQuery環(huán)境使用的多功能頁碼欄——jPagerBar-1.1.1 http://www.cnblogs.com/szw/archive/2008/02/23/1078238.html .NET+jQuery+JSON實(shí)現(xiàn)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/ |
|
|
