ajax 文法json調用 aspx頁面與MVC頁面不同

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

本文介紹如何在ASP.NET(ASP.NET/AJAX)裡使用基於JQuery的AJAX技術。（原始碼下載見最後）

在使用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，其他很容易類比學會。這個項目布局如

Sample1：JQuery支援基於Get的AJAX

本例子說明如何在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執行，

GetTicks.aspx很簡單，如下

 
int NoOfTicketsAvailable = 5;

Response.Write(NoOfTicketsAvailable.ToString());

  Response.End();

注意：需要Response.End();

這樣既OK了。

Sample2：JQuery支援基於Post的AJAX

和Sample1差別不大

代碼如下

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

運行結果同上

Sample3：JQuery支援基於ASP.NET
AJAX的AJAX

要在ASP.NET AJAX裡使用JQuery，需要將EnablePageMethods設定為true。如下

   

接下來，就可以使用ASP.NET AJAJX技術了，如下

然後使用即可，請注意URL的格式，頁面後面跟的是方法

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

注意：需要添加WebMethod修飾符。

Sample3：JQuery支援基於ASP.NET AJAX的AJAX傳遞參數

下面是主要代碼，注意參數是通過data傳遞的

因為傳遞了no參數，所以在後台就可用直接使用

注意：這裡後天裡的參數名需要和前台ajax裡定義的參數一樣

Sample4：JQuery支援基於ASP.NET
AJAX的AJAX傳遞參數到WebService

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

[System.Web.Script.Services.ScriptService]

看下面的代碼（在default.js檔案裡的）

下面是webservice檔案，注意紅色的標示。