WebAPI傳遞參數遇到的問題
Ajax的格式：
$.ajax({ type: "get", //數據發送的方式（post 或者 get） url: "/admin/index", //要發送的后台地址 data: { val1: "1", val2: "2" }, //要發送的數據（參數）格式為{'val1':"1","val2":"2"} dataType: "json", //后台處理后返回的數據格式 success: function(data) {//ajax請求成功后觸發的方法 alert('請求成功'); }, error: function(msg) {//ajax請求失敗后觸發的方法 alert(msg); //彈出錯誤信息 } });
后台實體類（Person）：
namespace WebApi.Models { public class Person { public int ID { get; set; } public string Name { get; set; } public string EnglishName { get; set; } } }
后台接口：
public class TestController : ApiController { public Person GetEnglishName(int ID, string Name) { Person man = new Person(); man.ID = ID; man.Name = Name; man.EnglishName = "Bert"; return man; } }
前端Ajax請求：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="Scripts/jquery-1.10.2.min.js"></script> <title></title> </head> <body> <input type="submit" id="testId" /><input type="text" id="text1" />
</body> </html> <script type="text/javascript"> $("#testId").click(function() { $.ajax({ url: "/api/Test/GetEnglishName", type: "GET", data: { "ID": 1, "Name": "yzc" }, success: function(data) { $("#text1").val(data.EnglishName); } }); }); </script>
結果：
如上，這是最普通的一次WebApi的Ajax請求，接下來我們來講幾個比較特殊的例子。代碼修改如下：黃色熒光筆的都是改動的代碼。
后台接口：
public class TestController : ApiController { public Person SetEnglishName(int ID, string Name) { Person man = new Person(); man.ID = ID; man.Name = Name; man.EnglishName = "Bert"; return man; } }
前端Ajax請求：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="Scripts/jquery-1.10.2.min.js"></script> <title></title> </head> <body> <input type="submit" id="testId" /><input type="text" id="text1" /> </body> </html> <script type="text/javascript"> $("#testId").click(function() { $.ajax({ url: "/api/Test/SetEnglishName", type: "GET", data: { "ID": 1, "Name": "yzc" }, success: function(data) { $("#text1").val(data.EnglishName); } }); }); </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"一起后台才能拿到數據。
后台接口：
public class TestController : ApiController { [HttpPost] public Person GetEnglishName(dynamic per) { Person man = new Person(); man.ID = per.ID; man.Name = per.Name; man.EnglishName = "Bert"; return man; } }
前端Ajax請求：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="Scripts/jquery-1.10.2.min.js"></script> </head> <body> <input type="submit" id="testId" /><input type="text" id="text1" /> </body> </html> <script type="text/javascript"> $("#testId").click(function() { $.ajax({ url: "/api/Test/GetEnglishName", type: "POST", contentType: "application/json", data: JSON.stringify({ "ID": 1, "Name": "yzc" }), success: function(data) { $("#text1").val(data.EnglishName); } }); }); </script>
結果：
