快捷導(dǎo)航

jquery調(diào)用asp.net 頁面后臺的實(shí)現(xiàn)代碼

更新時間：2011年04月27日 21:46:50 作者：

前一篇介紹jquery調(diào)用webservice，這一篇引用的是用jquery直接調(diào)用aspx后臺方法。

先創(chuàng)建一個aspx頁面編寫一個客戶端控件<input type="button" id="AjaxDemo"
value="AjaxDemo">
再aspx后臺的頁面編寫一個簡單的方法,代碼如下:

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

必須聲明為靜態(tài)方法，并且它們必須使用 [WebMethod] 特性標(biāo)注。但是在webservice里面不必是靜態(tài)方法，它的對象可以是list、dataset、class對象等……
接下來就應(yīng)該考慮怎么讓前臺的客戶端控件調(diào)用到后臺的方法了..這時jqury登場了..
在頁面引入jquery類庫
<script type="text/javascript"
src="JQuery/jquery-1.3.2-vsdoc2.js"></script>
在頁面添加腳本代碼如下:

復(fù)制代碼代碼如下:

 
<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類庫幫我們做完了,我們這里討論的是如何用,具體里面怎么實(shí)現(xiàn),我們不關(guān)心!
jquery里還有很多像$.ajax這樣的方法提供給我們使用.大家可以試試!
補(bǔ)充：注意要建3.5的項(xiàng)目，如果是2.0的話。配置文件會少很多引用的，如果你建的是2.0項(xiàng)目的話。建個3.5的。把3.5的配置文件覆蓋到2.0的項(xiàng)目即可！
上面的代碼如果成功之后彈出的是"{d:test}",是因?yàn)樗祷氐氖亲址?我們可以將他改成返回json對象.
把jquery代碼修改如下

復(fù)制代碼代碼如下:

 
$().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); } 
}) 
}) 
} 
} 

我們設(shè)置他返回的數(shù)據(jù)是json對象,現(xiàn)在我們可以用返回的json對象,根據(jù)彈出來的d:test,我們可以很明顯看到key是d,值是test,那我們利用返回的數(shù)據(jù)msg對象直接點(diǎn)d,就可以獲得test的,修改了代碼之后.現(xiàn)在彈出來就是test了..

您可能感興趣的文章: