JQUERY操作JSON實(shí)例代碼
更新時(shí)間:2010年02月09日 13:37:05 作者:
通過這篇文章你可以得到以下收獲JQUERY操作JSON的一些實(shí)現(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ì)注釋)
<!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>
<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)
代碼如下:
<%@ 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ù):
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ì)注釋)
復(fù)制代碼 代碼如下:
<!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>
<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)
代碼如下:
復(fù)制代碼 代碼如下:
<%@ 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ù):

相關(guān)文章
編寫高效jQuery代碼的4個(gè)原則和5個(gè)技巧
有了JQuery對(duì)JS的整合和封裝,它讓頁面操作更加的隨心所欲,所以只有遵循良好的規(guī)范才會(huì)讓代碼更高效,更健壯。以下是我對(duì)如何高效操作JQuery的一些拙見,望指正!2014-04-04jQuery實(shí)現(xiàn)優(yōu)雅的彈窗效果(6)
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)優(yōu)雅彈窗效果 的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02jQuery實(shí)現(xiàn)帶動(dòng)畫效果的多級(jí)下拉菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶動(dòng)畫效果的多級(jí)下拉菜單代碼,可實(shí)現(xiàn)點(diǎn)擊漸隱漸顯效果,涉及jQuery頁面元素的遍歷及鏈?zhǔn)讲僮飨嚓P(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09jQuery效果 slideToggle() 方法(在隱藏和顯示之間切換)
slideToggle() 方法通過使用滑動(dòng)效果(高度變化)來切換元素的可見狀態(tài)。2011-06-06為jQuery-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄獮閖Query-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10jquery插件uploadify多圖上傳功能實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jquery插件uploadify多圖上傳功能實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08jQuery實(shí)現(xiàn)單行文字間歇向上滾動(dòng)源代碼
使用jquery實(shí)現(xiàn)的文字向上滾動(dòng)效果多的不計(jì)其數(shù)吧,間歇向上滾動(dòng)卻不是那么的多,所以本文簡(jiǎn)單的實(shí)現(xiàn)了一個(gè),感興趣的朋友可以參考下哈2013-06-06jQuery學(xué)習(xí)筆記之jQuery原型屬性和方法
這篇文章主要介紹了jQuery原型屬性和方法,,需要的朋友可以參考下2014-06-06