WebAPI學習日記一：Ajax請求傳遞參數遇到的問題

時間 2019-11-19

標籤 webapi 學習日記 ajax 請求傳遞參數遇到問題欄目 Ajax 简体版

原文原文鏈接

首先，本人大學剛畢業，想把本身學習的一些東西記錄下來，也是和你們分享，若有不對之處還請多加指正。
聲明：但凡是我博客裏的文章均是本人實際操做遇到的例子，不會隨便從網上拷貝或者轉載，本着對本身和觀衆負責的態度。javascript

什麼是WebAPI？個人理解是WebAPI+JQuery（前端）基本上能完成Web MVC的功能，即：這麼理解吧，WebAPI至關於Web MVC的後臺部分。html

接下來直接上例子吧，都是我在學習過程當中遇到或者發現的一些問題。前端

1、建立WebAPI項目java

（這個環節不是本章重點）jquery

2、傳遞參數遇到的問題ajax

後臺實體類（Person）：json

 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 }

　　後臺接口：api

 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請求：app

 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>

　　結果：post

　如上，這是最普通的一次訪問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]的參數是簡單參數，該標記能夠去掉。)

請求的時候一、data：JSON.stringify(x)和contentType: "application/json"一塊兒使用，或者二、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     }

　結果：

3、總結：

本文關於Web API參數請求的狀況並無所有寫出來，而是根據本人在學習過程當中遇到的一些問題特地記錄下來，講的不明白的地方歡迎討論交流。我以爲學習軟件開發就得知其然，知其因此然，但因爲也是剛接觸這個Web API，文中蠻多地方，都是本身去測試，去找資料，因此有些地方還不能很好的解釋，但我相信這並不結束，而是開始。