首先,本人大學剛畢業,想把自己學習的一些東西記錄下來,也是和大家分享,如有不對之處還請多加指正。聲明:但凡是我博客里的文章均是本人實際操作遇到的例子,不會隨便從網上拷貝或者轉載,本著對自己和觀眾負責的態度。 什麼是WebAPI?我的理解是WebAPI+JQuery(前端)基本上能完成Web MVC的 ...
首先,本人大學剛畢業,想把自己學習的一些東西記錄下來,也是和大家分享,如有不對之處還請多加指正。
聲明:但凡是我博客里的文章均是本人實際操作遇到的例子,不會隨便從網上拷貝或者轉載,本著對自己和觀眾負責的態度。
什麼是WebAPI?我的理解是WebAPI+JQuery(前端)基本上能完成Web MVC的功能,即:這麼理解吧,WebAPI相當於Web MVC的後臺部分。
接下來直接上例子吧,都是我在學習過程中遇到或者發現的一些問題。
一、創建WebAPI項目
(這個環節不是本章重點)
二、傳遞參數遇到的問題
後臺實體類(Person):
1 namespace WebApi.Models
2 {
3 public class Person
4 {
5
6 public int ID { get; set; }
7 public string Name { get; set; }
8 public string EnglishName { get; set; }
9 }
10 }
後臺介面:
1 public class TestController : ApiController
2 {
3 public Person GetEnglishName(int ID, string Name)
4 {
5 Person man = new Person();
6 man.ID = ID;
7 man.Name = Name;
8 man.EnglishName = "Bert";
9 return man;
10 }
11 }
前端Ajax請求:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title></title>
6 <meta charset="utf-8" />
7 </head>
8 <body>
9 <input type="submit" id="testId"/>
10 <input type="text" id="text1"/>
11 </body>
12 </html>
13 <script src="Scripts/jquery-1.10.2.min.js"></script>
14 <script type="text/javascript">
15 $("#testId").click(function () {
16 $.ajax({
17 url: "/api/Test/GetEnglishName",
18 type: "GET",
19 data: { "ID": 1, "Name": "yzc" },
20 success: function (data) {
21 $("#text1").val(data.EnglishName);
22 }
23 });
24 });
25 </script>
結果:
如上,這是最普通的一次訪問WebApi的的Ajax請求,接下來我們來講幾個比較特殊的例子,希望能加強對WebAPI傳參的理解和使用。
①代碼修改如下:
1 public class TestController : ApiController
2 {
3 public Person SetEnglishName(int ID, string Name)
4 {
5 Person man = new Person();
6 man.ID = ID;
7 man.Name = Name;
8 man.EnglishName = "Bert";
9 return man;
10 }
11 }
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
4 <title></title>
5 <meta charset="utf-8" />
6 </head>
7 <body>
8 <input type="submit" id="testId"/>
9 <input type="text" id="text1"/>
10 </body>
11 </html>
12 <script src="Scripts/jquery-1.10.2.min.js"></script>
13 <script type="text/javascript">
14 $("#testId").click(function () {
15 $.ajax({
16 url: "/api/Test/SetEnglishName",
17 type: "GET",
18 data: { "ID": 1, "Name": "yzc" },
19 success: function (data) {
20 $("#text1").val(data.EnglishName);
21 }
22 });
23 });
24 </script>
結果:
結論:這裡我們僅僅只是更改了介面的名稱而已,從GetEnglishName改為SetEnglishName,為什麼就找不到該方法了呢?原因是:WebAPI對於後臺方法介面在沒有給它添加訪問方式的前提下(如:[HttpPost]),並且方法名稱開頭帶著Get的話,預設是Get請求。所有在上面例子中,方法名既沒有標明請求方式,也不是Get開頭,它自然找不到可以允許訪問的方法了,建議:不管是什麼類型的請求都在方法上設置訪問類型。
②post請求傳遞一個參數的時候,data並不是傳的鍵/值對形式,而是data:{"":"yzc"},記住這種特殊情況,不然後臺是獲取不到前端傳過去的值得,至於原因是:Web API 要求請求傳遞的 [FromBody] 參數,是有一個特定的格式,才能被正確的獲取到。
③post傳遞多個參數的時候 (被標記[FromBody]的參數只能出現一次,被標記為[FromUri]的參數可以出現多次,如果被標記為[FromUri]的參數是簡單參數,該標記可以去掉。)
請求的時候1、data:JSON.stringify(x)和contentType: "application/json"一起使用,或者2、data:{為鍵值對},並且不能加contentType: "application/json",這兩種情況後臺[FromBody]參數都能獲取到值。(經測試過,當出現交叉情況,如:data裡面為鍵值對,且加了contentType: "application/json",後臺將不能訪問數據)
④當post請求的參數多的時候,就需要封裝在一個類裡面,這樣後臺也需要創建臨時類來接收,而dynamic可以讓我們省掉許多類。然而前端Ajax請求參數的配置目前自己試過的只有data:JSON.stringify(x)和contentType:"application/json"一起後臺才能拿到數據。
前端請求:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title></title>
6 <meta charset="utf-8" />
7 </head>
8 <body>
9 <input type="submit" id="testId"/>
10 <input type="text" id="text1"/>
11 </body>
12 </html>
13 <script src="Scripts/jquery-1.10.2.min.js"></script>
14 <script type="text/javascript">
15 $("#testId").click(function () {
16 $.ajax({
17 url: "/api/Test/GetEnglishName",
18 type: "POST",
19 contentType: "application/json",
20 data:JSON.stringify({ "ID": 1, "Name": "yzc"}),
21 success: function (data) {
22 $("#text1").val(data.EnglishName);
23 }
24 });
25 });
26 </script>
後臺介面:
1 public class TestController : ApiController
2 {
3 [HttpPost]
4 public Person GetEnglishName(dynamic per)
5 {
6 Person man = new Person();
7 man.ID = per.ID;
8 man.Name = per.Name;
9 man.EnglishName = "Bert";
10 return man;
11 }
12 }
結果:
三、總結:
本文關於Web API參數請求的情況並沒有全部寫出來,而是根據本人在學習過程中遇到的一些問題特意記錄下來,講的不明白的地方歡迎討論交流。我覺得學習軟體開發就得知其然,知其所以然,但由於也是剛接觸這個Web API,文中蠻多地方,都是自己去測試,去找資料,所以有些地方還不能很好的解釋,但我相信這並不結束,而是開始。