WebAPI GET和POST請求的幾種方式

GET請求

1.無參數get請求

 一般get請求有兩種寫法，一種是$.get()   一種是$.ajax({type:"get"})，我個人比較喜歡用后者。

下面例子主要是get無參數請求，獲取人員列表並將數據返回到前台，並將返回的json數據轉換成字符串彈出，以便知道是否請求成功，並且返回的數據是否正確

 1    $.ajax({
 2             url: "/api/Person/getList",
 3             type: "get",
 4             success: function (data) {
 5                 alert(JSON.stringify(data));
 6                 alert("成功");
 7             },
 8             error: function () {
 9                 alert("錯誤");
10             }
11         });

后台代碼

 1  public class PersonController : ApiController
 2     {
 3       
 4         public List<Person> getList()
 5         {
 6             var PersonList = new List<Person>(){
 7                 new Person{Name="張和",Sex="男",Duty="工程師",CompanyName="北京XX科技有限公司"},
 8                 new Person{Name="張麗",Sex="女",Duty="工程師",CompanyName="北京XX科技有限公司"},
 9                 new Person{Name="張春雷",Sex="男",Duty="工程師",CompanyName="北京XX科技有限公司"}
10             };
11             return PersonList;
12         }
13     }

2.多個參數的Get請求，參數格式：data:{},例如 一個參數的get請求是data:{"Name":"張麗"},兩個參數：data:{"Name":"張麗","Sex":"女"},多個參數只是在{}里加入多個參數而已。

 1   $.ajax({
 2             url: "/api/Person/GetPerson",
 3             type: "get",
 4             data:{"Name":"張麗","Sex":"女"},
 5             success: function (data) {
 6                 alert(data.Name+" "+data.Duty+"  "+data.CompanyName);
 7             },
 8             error: function () {
 9                 alert("錯誤");
10             }
11         });

后台代碼

 1    public Person GetPerson(string Name,string Sex)
 2         {
 3             var PersonList = new List<Person>(){
 4                 new Person{Name="張和",Sex="男",Duty="工程師",CompanyName="北京XX科技有限公司"},
 5                 new Person{Name="張麗",Sex="女",Duty="工程師",CompanyName="北京XX科技有限公司"},
 6                 new Person{Name="張春雷",Sex="男",Duty="工程師",CompanyName="北京XX科技有限公司"}
 7             };
 8             var p = PersonList.FirstOrDefault(f => f.Name == Name&&f.Sex==Sex);
 9             return p;
10         }

最終效果

 

 

POST請求

1.無參數的POST請求

      無參數的POST請求和GET請求是一樣的，只不過是ajax里的type:"get"改成type:"post"而已，后台函數要加 [HttpPost]標簽，主要是標記該函數是post請求函數，如果get請求是請求不進去該函數的。

2.一個參數的POST請求

    一個參數的post請求和GET請求的方式不一樣，后台函數的參數必須用[FromBody]標記，這樣才能訪問到該函數，如果不加[FromBody] , ASP.NET Web API能夠正確的識別我們的UserController控制器處理Post /api/Person ，但卻不能找到一個可以接受的方法來處理請求。那么有人就說了后台參數加了[FromBody] ，js如下是不是就可以請求成功哪

 

 1  $.ajax({
 2             url: "/api/Person/Post_Person",
 3             type: "post",
 4             data:{"Name":"張麗"},
 5             success: function (data) {
 6                 alert("成功");
 7                 alert(data);
 8                 alert(data.Name + " "  + data.CompanyName);
 9             },
10             error: function () {
11                 alert("錯誤");
12             }
13         });

 

答案是失敗的，確切的說是可以訪問到PersonControler里的Post_Person方法的，但是Post_Person函數的參數是獲取不到前台ajax傳遞過來的值得，為什么呢？是因為Web API 要求請求傳遞的 [FromBody] 參數，是有一個特定的格式，才能被正確的獲取到。而這種特定的格式並不是我們常見的 key=value 的鍵值對形式。Web API 的模型綁定器希望找到 [FromBody] 里沒有鍵名的值，也就是說， 不是 key=value ，而是 =value 。

所以將data:{"Name":"張麗"}改成data:{"":"張麗"} 這樣后台函數才可以正確接收到傳遞過來的參數值

3.多個參數的POST請求

   有人會認為多個參數的Post請求，就是后台函數加多個帶[FromBody]標記的參數即可，如果你是這樣想的，那么你錯了。請一定要記住多個參數POST請求，

[FromBody] 修飾的參數只能有一個 。我們需要對傳遞的多個參數進行封裝才行。 　　

 

 

 1 var Person = {
 2         Name: "張麗",
 3         Sex: "女",
 4         Duty: "ddd",
 5     }
 6     
 7         $.ajax({
 8             url: "/api/Person/Post_PersonObj",
 9             type: "post",
10             data: Person,
11             success: function (data) {
12                 alert("成功");
13                 alert(data);
14                 alert(data.Name + " " + data.CompanyName);
15             },
16             error: function (data) {
17                 alert(data.responseText);
18             }
19         });

 

后台代碼 

 1 [HttpPost]
 2        public Person Post_PersonObj([FromBody]Person per)
 3         {
 4             var PersonList = new List<Person>(){
 5                 new Person{Name="張和",Sex="男",Duty="工程師",CompanyName="北京XX科技有限公司"},
 6                 new Person{Name="張麗",Sex="女",Duty="工程師",CompanyName="北京XX科技有限公司"},
 7                 new Person{Name="張春雷",Sex="男",Duty="工程師",CompanyName="北京XX科技有限公司"}
 8             };
 9             var p = PersonList.FirstOrDefault(f => f.Name == per.Name&&f.Sex==per.Sex);
10             return p;
11         }




整個例子的源代碼下載地址：http://pan.baidu.com/s/1mgooA8K