前後臺通過Jq|json交互

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代碼就是實現的全部代碼,有詳細註釋)

<!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+"&nbsp; 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,後臺調試的數據:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章