[轉]jQuery調用ASPX返回json


本文轉自:http://www.cnblogs.com/fire-phoenix/archive/2009/11/13/1614146.html

 

本文介紹如何在ASP.NET(ASP.NET/AJAX)里使用基於JQueryAJAX技術。(源代碼下載見最后)

 

 在使用JQuery前,請到www.jquery.com下載最新版本的js代碼,然后再代碼里使用

 <script src="_scripts/jQuery-1.3.2.js" type="text/javascript"></script>即可, 當然,由於微軟已經把JQuery集成到VS里,所以你可以WWW.ASP.NET/ajax查看

 

本文將通過六個列子介紹如何在ASP.NET里使用JQuery,其他很容易類比學會。這個項目布局如下圖

 

 

 


Sample1JQuery支持基於GetAJAX

 

本例子說明如何在ASP.NET里使用基於JQuery的Get方法。頁面布局代碼如下: 頁面布局很簡單,一個文本框用於輸入票數,還有一個ID為Error1的div,用於顯示AJAX操作結果。 下面是AJAX的方法

 

 

在了解代碼前,看一下運行結果: 運行效果

 

 


在票數后面輸入數字,如果大於5,則給出提示信息,否則,則沒有。 這里使用了文本框的change事件,所以輸入數字后,需要使其失去焦點, 否則看不到結果 下面是對上面代碼的簡單解釋:

 

       <script language="javascript">

            $(document).ready(function() {

            ...

            }

        </script>

是一個類似英語用法的標准句型,當頁面完畢后做某事的意思。 可能有人需要問為什么需要需要這樣的類型。這是因為JS的位置不同,需要執行不同的判斷。考慮一下到你打開的百度頁面,當百度頁面加載完畢后,光標會自動定位到輸入框

這里它的代碼可能類似如下:

<input type="text" id="f">

<script>

var o=document.getElemementById("f");

o.focus(); </script>

在這里,這段腳本必須放在后面,如果這樣放置代碼

<script>

var o=document.getElemementById("f");

</script>

<input type="text" id="f">

則瀏覽器在執行時會報錯,因此此時文本框還未加載。使用JQuery則不用管那么多,在頁面頭或者尾部盡管用  $(document).ready(function() {},這也是JQuery的好處。

其他都很簡單,概括的說,對於輸入框如textbox,select等則用val()獲取/設置其值,對於div,p,span等則是html()獲取/設置其值,   $.get("GetTicks.aspx", function(result) {…} 表示數據處理會由GetTicks.aspx執行,
G
etTicks.aspx很簡單,如下

  int NoOfTicketsAvailable = 5;

 Response.Write(NoOfTicketsAvailable.ToString());

  Response.End();

注意:需要Response.End();

 

這樣既OK了。
Sample2JQuery支持基於PostAJAX

Sample1差別不大

代碼如下

 

 


不過,需要注意的是這里傳遞了參數TicReq,對於URL,一般都是name=key的方式,例如 default.aspx?id=1,則可以使用Request.QueryString["id"]獲取id的值為1,所以上面傳遞的相當於 GetTicksByPost.aspx?TicReq=ticketsReq (不過,這里的ticketsReq是個變量值,系統自動轉換) 所以在
GetTicksByPost.aspx里就可用獲取該參數

運行結果同上
Sample
3JQuery支持基於ASP.NET AJAXAJAX

要在ASP.NET AJAX里使用JQuery,需要將EnablePageMethods設置為true。如下

 

    
接下來,就可以使用ASP.NET AJAJX技術了,如下
 
然后使用即可,請注意URL的格式,頁面后面跟的是方法

url: "default.aspx/GetAvailableTickets",表示使用default.aspx里定義的GetAvailableTickets方法。 后台代碼如下,

 

注意:需要添加WebMethod修飾符

 

 



Sample3
JQuery支持基於ASP.NET AJAXAJAX傳遞參數

 

下面是主要代碼,注意參數是通過data傳遞的
因為傳遞了no參數,所以在后台就可用直接使用

 

注意:這里后天里的參數名需要和前台ajax里定義的參數一樣

 

Sample4JQuery支持基於ASP.NET AJAXAJAX傳遞參數到WebService

如果使用WebService,需要在類前加入

[System.Web.Script.Services.ScriptService]

看下面的代碼(在default.js文件里的)

下面是webservice文件,注意紅色的標示。

 

 

 


Sample
5建立類似博客園的閃存


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM