.Net ajax調用 WebService 簡單例子

來源:互聯網
上載者:User

現在ajax很流行,最簡單的開發模式時背景程式只處理ajax請求,然後返回json資料,前段全部是靜態html,裡面用js構建介面。以前都是用一般處理常式來處理ajax請求,然後將結果用json類庫序列化成json返回給頁面。這樣做後端處理還是比較麻煩的,而且每個請求要麼單獨一個處理常式,要麼得加額外參數來區別不同的ajax請求,很煩,最近發現了一個更簡單的方法,直接用js調用.net WebService,這樣後台代碼比較整齊,開發也快,調試也容易,直接瀏覽器敲一下WebService地址,點擊某個方法調用就行了。下面是簡單例子的構建過程:

1. 在VS裡面增加一個Web空項目。

2. 在項目裡面增加一個Web服務,我起的名字是user,最後會多一個user.asmx檔案。

3. 給WebService增加方法和支援ajax 指令碼調用的標籤,代碼如下:

 1 /// <summary>
2 /// WebService1 的摘要說明
3 /// </summary>
4 [WebService(Namespace = "http://tempuri.org/", Name="user.asmx")]
5 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
6 [System.ComponentModel.ToolboxItem(false)]
7 // 若要允許使用 ASP.NET AJAX 從指令碼中調用此 Web 服務,請取消對下行的注釋。
8 [ScriptService]
9 public class WebService1 : System.Web.Services.WebService
10 {
11 [WebMethod]
12 [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
13 public People GetCurrentUser()
14 {
15 People p = new People();
16 p.Name = "李土鱉";
17 p.Age = 28;
18 p.Detail = "半吊子軟體工程師";
19 return p;
20 }
21
22 [WebMethod]
23 [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
24 public int Add(int a, int b)
25 {
26 return a + b;
27 }
28 }
29
30 public class People
31 {
32 public string Name { set; get; }
33 public int Age { set; get; }
34 public string Detail { set; get; }
35 }

4. 用一個靜態html檔案測試,代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="script/lib/jquery-1.7.1.js" ></script>
<script type="text/javascript">
function callWebService(url, param,handler) {
$.ajax({
url: url,
data: param,
type: "get",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (p) {
handler(p.d);
}
});
};
</script>
</head>
<body>
<script type="text/javascript">
callWebService("user.asmx/GetCurrentUser", null, function (data) {
document.body.innerHTML += "user name:" + data.Name + "<br/>";
});
callWebService("user.asmx/Add", { a: 1, b: 2 }, function (data) {
document.body.innerHTML += "add result:" + data;
});
</script>
</body>
</html>
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.