WebAPI GET和POST請求的幾種方式

GET請求

1.無參數get請求

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

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

   $.ajax({
            url: "/api/Person/getList",
            type: "get",
            success: function (data) {
                alert(JSON.stringify(data));
                alert("成功");
            },
            error: function () {
                alert("錯誤");
            }
        });

后台代碼

 public class PersonController : ApiController
    {
      
        public List<Person> getList()
        {
            var PersonList = new List<Person>(){
                new Person{Name="張和",Sex="男",Duty="工程師",CompanyName="北京XX科技有限公司"},
                new Person{Name="張麗",Sex="女",Duty="工程師",CompanyName="北京XX科技有限公司"},
                new Person{Name="張春雷",Sex="男",Duty="工程師",CompanyName="北京XX科技有限公司"}
            };
            return PersonList;
        }
    }

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

  $.ajax({
            url: "/api/Person/GetPerson",
            type: "get",
            data:{"Name":"張麗","Sex":"女"},
            success: function (data) {
                alert(data.Name+" "+data.Duty+"  "+data.CompanyName);
            },
            error: function () {
                alert("錯誤");
            }
        });

后台代碼

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

最終效果

 

 

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如下是不是就可以請求成功哪

 

 $.ajax({
            url: "/api/Person/Post_Person",
            type: "post",
            data:{"Name":"張麗"},  5             success: function (data) {
                alert("成功");
                alert(data);
                alert(data.Name + " "  + data.CompanyName);
            },
            error: function () {
                alert("錯誤");
            }
        });

 

答案是失敗的，確切的說是可以訪問到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] 修飾的參數只能有一個 。我們需要對傳遞的多個參數進行封裝才行。 　　

 

 

var Person = {
        Name: "張麗",
        Sex: "女",
        Duty: "ddd",
    }
    
        $.ajax({
            url: "/api/Person/Post_PersonObj",
            type: "post",
            data: Person,
            success: function (data) {
                alert("成功");
                alert(data);
                alert(data.Name + " " + data.CompanyName);
            },
            error: function (data) {
                alert(data.responseText);
            }
        });

 

后台代碼 

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




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