JQUERY操作asp.net ajax的JSON實例
編輯：JQuery常見問題
通過這篇文章你可以得到以下收獲JQUERY操作JSON的一些實現方法。
1.jqury如何用ajax的形式調用後台asp.net頁面生成的json數據
2.jquery簡單的dom操作
3.送本jquery的開發手冊給大家（大家慢慢去研究）
准備工作：
首先，我們新建個網站（.net2.0就行）.
1.在我們的項目中jquery的js文件。
2.新建一個htm文件，命名為dome.htm吧。
代碼如下：（head區的js代碼就是實現的全部代碼，有詳細注釋）
代碼如下:
<!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數據演示頁面</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）
代碼如下：
<%@ 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，後台調試的數據：
1.jqury如何用ajax的形式調用後台asp.net頁面生成的json數據
2.jquery簡單的dom操作
3.送本jquery的開發手冊給大家（大家慢慢去研究）
准備工作：
首先，我們新建個網站（.net2.0就行）.
1.在我們的項目中jquery的js文件。
2.新建一個htm文件，命名為dome.htm吧。
代碼如下：（head區的js代碼就是實現的全部代碼，有詳細注釋）
代碼如下:
<!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數據演示頁面</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）
代碼如下：
<%@ 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，後台調試的數據：
小編推薦
熱門推薦