web api 初體驗之 GET和POST傳參

上一篇我們講到了web api跨域的問題 它幾乎是每一個用web api的人都需要去解決的問題，不然都沒法測試。接下來會遇到的問題就是傳參了。還是用js前台調用服務的方式。

GET 方式

get方式傳參 我們一般用於獲取數據做條件篩選，也就是 “查”

1.無參

var look = function () {
        $.ajax({
            type: "GET",
            url: "http://172.28.20.106:8002/api/products/",
            dataType: "xml",
            contentType: 'application/xml;charset=gb2312;'
        }).success(function (res) {
            console.log(res);
        }).error(function (xhr, status) {
            console.log(xhr);
        });
    }

2.一個參數

var look = function () {
        $.ajax({
            type: "GET",
            url: "http://172.28.20.106:8002/api/users/",
           data:{"id":2},
            dataType: "xml",
            contentType: 'application/xml;charset=gb2312;'
        }).success(function (res) {
            console.log(res);
        }).error(function (xhr, status) {
            console.log(xhr);
        });
    }
后台控制器方法如下：

  // GET api/users/5
        public string Get(int id)
        {
            return "id:"+id;
        }

當然,也可以這樣 把參數放在url

   var look = function () {
        $.ajax({
            type: "GET",
           url: "http://172.28.20.106:8002/api/users/2",
            dataType: "xml",
            contentType: 'application/xml;charset=gb2312;'
        }).success(function (res) {
            console.log(res);
        }).error(function (xhr, status) {
            console.log(xhr);
        });
    }

輸出：<string xmlns="http://schemas.microsoft.com/2003/10/Serialization/">id:2</string>

3.多個簡單參數

后台方法體如下：

 // GET api/users/5
        public string Get(int id,string name)
        {
            return "id:" + id+" name:"+name;
        }

 多個參數時也比較簡單 指明參數就行了

   var look = function () {
        $.ajax({
            type: "GET",
            url: "http://172.28.20.106:8002/api/users",
          data:{"id":2,"name":"張飛"},
            dataType: "json",
            contentType: 'application/json;charset=gb2312;'
        }).success(function (res) {
            console.log(res);
        }).error(function (xhr, status) {
            console.log(xhr);
        });
    }
輸出："id:1 name:張飛"

 

4.傳遞一個對象
后台方法如下：

 [Route("Manger")] public string Get( Product model)
        {
            return "id:" + model.Id + " name:" + model.Name;
        }

大家可能注意到這個方法上面有個標記了，這個其實是自定義路由，針對重載方法，防止出現匹配到多個適配的方法而報錯

 
這里必須要着重說明下，傳遞對象並不是理所當然的構造一個對象傳過去就可以了

var look = function () {
        var Product = {
            Id: 1,
            Name: "張飛",
            Category:"212",
            Price:22 };
        $.ajax({
            type: "GET",
            url: "http://172.28.20.106:8002/api/users/Manger",
            //data:{ "model":{"Id":2,"Name":"張飛","Category":"22","Price":22}},
            data: Product ,
            dataType: "json",
            contentType: 'application/json;charset=gb2312;'
        }).success(function (res) {
            console.log(res);
        }).error(function (xhr, status) {
            console.log(xhr);
        });
    }
這2種情況都會報錯
經過多次試驗發現，后台方法參數列表內加入

[FromUri]關鍵字就可以了
加入后的方法如下

[Route("Manger")]
public string Get([FromUri] Product model)
{
return "id:" + model.Id + " name:" + model.Name;
}

輸出："id:1 name:張飛"

 

POST方式

   post方式我們一般用來做增 刪 改 ，不過在web api中post僅僅用來做增加操作  修改用put 刪除用delete

可以看看模板給我們生成的東西

       // PUT api/users/5
        public string Put(int id, [FromBody]string value)
        {
            return "id:" + id + "value:" + value;
        }

        // DELETE api/users/5
        public void Delete(int id)
        {
        }

1.post的一個參數

注意：post 提交必須使用

[FromBody]關鍵字，並且參數列表里面只能有一個關鍵字，多個無效

 

 

 // POST api/users
          [Route("addid")]
        public string Post([FromBody]string value)
        {
            return "值是：" + value;
        }

 

慣性思維，然后我們的前台會寫成這個樣子

        $.ajax({
            type: "POST",
            url: "http://172.28.20.106:8002/api/users/addid",
            data: {"value":"1"}
        }).success(function (res) {
            console.log(res);
        }).error(function (xhr, status) {
            console.log(xhr);
        });

結果輸出卻發現   值是："

后台並沒有收到數據

總結：

  當只有一個參數時，有2種方式是可以獲取到值的

 1. data: {"":"1"} //忽略參數名

 2. data: "=1"   //加上”=“號 並且去掉花括號

     $.ajax({
            type: "POST",
            url: "http://172.28.20.106:8002/api/users/addid",
            data: {"":"1"}
        }).success(function (res) {
            console.log(res);
        }).error(function (xhr, status) {
            console.log(xhr);
        });

    $.ajax({
            type: "POST",
            url: "http://172.28.20.106:8002/api/users/addid",
          data: "=1"
        }).success(function (res) {
            console.log(res);
        }).error(function (xhr, status) {
            console.log(xhr);
        });

輸出："值是：1"

2.post的多個參數（1個對象）

   注意：post並不能提交多個參數，只能合並成對象

  錯誤寫法：

 public string Post(int id,string name)
          {
              return "id是：" + id+" name:"+name;
          }

  public string Post(int id,[FromBody] string name)
          {
              return "id是：" + id+" name:"+name;
          }

正確寫法：

 [Route("addmodel")]
 public string Post([FromBody] Product value)
        {
            return "值是：" + value.Id+" name :"+value.Name;
        }

前台調用：

     var Product = {
            Id: 1,
            Name: "張飛",
            Category: "212",
            Price: 22 };
        $.ajax({
            type: "POST",
            url: "http://172.28.20.106:8002/api/users/addmodel",
            data: Product
        }).success(function (res) {
            console.log(res);
        }).error(function (xhr, status) {
            console.log(xhr);
        });

輸出：  "值是：1 name :張飛"

 

3.post的多個參數（多個對象）

    如果有多個對象，那就只能把它封裝在一個擴展對象里面了

   

public class User
    {
        public int ID { get; set; }
        public int Name { get; set; }
    }

public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }
    }

//實體擴展類
  public class NewProduct
    {
        public User user { get; set; }
        public Product product { get; set; }
    }

接下來就以擴展類為參數，后台代碼變成這樣

         [Route("addnewmodel")]
          public string Post([FromBody] NewProduct value)
          {
              return "userid值是：" + value.user.ID + " priduct值是 :" + value.product.Name;
          }

接下來就是前台調用

    var Product = {
            Id: 1,
            Name: "手機",
            Category: "212",
            Price: 22
           
        };
        var User = {
            Id: 1,
            Name: "張飛",
        };
        $.ajax({
            type: "POST",
            url: "http://172.28.20.106:8002/api/users/addnewmodel",
            data: { Product: Product ,User:User}
        }).success(function (res) {
            console.log(res);
        }).error(function (xhr, status) {
            console.log(xhr);
        });

輸出： "userid值是：1 priduct值是 :手機"

 

也可以寫成這樣

 $.ajax({
            type: "POST",
            url: "http://172.28.20.106:8002/api/users/addnewmodel",
            data: {
                Product: { Id: 1, Name: "手機", Category: "212", Price: 22 }, User: { Id: 1, Name: "張飛", }
            }
        }).success(function (res) {
            console.log(res);
        }).error(function (xhr, status) {
            console.log(xhr);
        });

 

自定義路由

額外的提一下,由於我代碼中大量用到它，還是介紹一下
使用場景：用於方法重載 忽略方法名 自定義url（更好看點）

使用步驟：
1.在控制器類上方加入一個標記

   [RoutePrefix("api/users")]
    public class UsersController : ApiController
    {
    }

里面的內容可以根據自己的喜好來定義

2.在方法中加入路由標記[Route("Manger")]

      [Route("Manger")]
        public string Get([FromUri] Product model)
        {
            return "id:" + model.Id + " name:" + model.Name+" price:"+model.Price;
        }

這樣再訪問時就可以使用

api/users/Manger  

 

注意：如果想實現第2步，必須先實現第一步，不然會報錯

總結

  傳參的方式估計不只這幾種，目前只用到了這些。后續如果繼續深入學習 也會分享給大家。如果有理解錯誤的地方，歡迎指正。避免誤人子弟！ 如果覺得有收獲，請關注 推薦 http://www.cnblogs.com/jingch個人主頁