jquery-ajax之2：調用asp.net 頁面後台方法

ps：前一篇介紹jquery調用webservice，這一篇引用的是用jquery直接調用aspx後台方法。

先建立一個aspx頁面編寫一個用戶端控制項<input type="button" id="AjaxDemo"
value="AjaxDemo">

再aspx背景頁面編寫一個簡單的方法,代碼如下:

[WebMethod]
public static string ABC(string ABC)
{
    return ABC;
}

 

必須聲明為靜態方法，並且它們必須使用 [WebMethod] 特性標註。但是在webservice裡面不必是靜態方法，它的對象可以是list、dataset、class對象等……

接下來就應該考慮怎麼讓前台的用戶端控制項調用到背景方法了..這時jqury登場了..

在頁面引入jquery類庫

<script type="text/javascript"
src="JQuery/jquery-1.3.2-vsdoc2.js"></script>

 

在頁面添加指令碼代碼如下:

<script type="text/javascript">

$().ready( function() {
               
　　$("#AjaxDemo").click(function() {
                   
　　　　$.ajax({
                        type: "POST",
                       
　　　　　　　　url: "Default.aspx/ABC",
                        data: "{'ABC':'test'}",
                        contentType: "application/json; charset=utf-8",
                        success: function(msg) {alert(msg); }
                    })
                })
            }
)

</script >

這樣就大功告成了!很多事情都是jquery類庫幫我們做完了,我們這裡討論的是如何用,具體裡面怎麼實現,我們不關心!

 

jquery裡還有很多像$.ajax這樣的方法提供給我們使用.大家可以試試!

 

補充：注意要建3.5的項目，如果是2.0的話。設定檔會少很多引用的，如果你建的是2.0項目的話。建個3.5的。把3.5的設定檔覆蓋到2.0的項目即可！

 

上面的代碼如果成功之後彈出的是"{d:test}",是因為他返回的是字串,我們可以將他改成返回json對象.

 

把jquery代碼修改如下

 

$().ready(
            function() {
               
$("#AjaxDemo").click(function() {
                   
　　$.ajax({
                 type: "POST",
                       
　　　　　　url: "Default.aspx/ABC",
                 data: "{'ABC':'test'}",
                 dataType: "json",
                 contentType: "application/json; charset=utf-8",
                 success: function(msg) {alert(msg.d); }
                    })
                })
            }
       
}

我們設定他返回的資料是json對象,現在我們可以用返回的json對象,根據彈出來的d:test,我們可以很明顯看到key是d,值是test,那我們利用返回的資料msg對象直接點d,就可以獲得test的,修改了代碼之後.現在彈出來就是test了..

 

轉自：http://blog.163.com/l_gx396696760/blog/static/39228229200910236212954/