.Net ajax調用 WebService 簡單例子

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

現在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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More