DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery調用asp.net 頁面後台的實現代碼
jquery調用asp.net 頁面後台的實現代碼
編輯:JQuery特效代碼     
先創建一個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了..
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved