MVC和WebApi 使用get和post 传递参数。

我们总结一下用js请求服务器的传参方法。

Get方式

Get主要是用来查询,一般分为无参,一个参数,多个参数,实体对象参数。

1、无参

 

  1.  
    //Get没有参数
  2.  
    var get_f1 = function() {
  3.  
    $.ajax({
  4.  
    type: "get",
  5.  
    url: "/api/Demo",
  6.  
    success: function(data, status) {
  7.  
    if (status == "success") {
  8.  
    $("#div_test").html(data);
  9.  
    }
  10.  
    }
  11.  
    });
  12.  
    }

2、一个参数

 

  1.  
    //Get一个参数
  2.  
    var get_f2 = function() {
  3.  
    $.ajax({
  4.  
    type: "get",
  5.  
    url: "/api/Demo",
  6.  
    data: { strQuery: JSON.stringify({ Id: "1", Name: "Jim", CreateTime: "1988-09-11" }) },
  7.  
    contentType: "application/json",
  8.  
    success: function(data, status) {
  9.  
    if (status == "success") {
  10.  
    $("#div_test").html(data);
  11.  
    }
  12.  
    }
  13.  
    });
  14.  
    }

后台控制器方法

 

  1.  
    /// <summary>
  2.  
    /// 一个参数
  3.  
    /// </summary>
  4.  
    /// <param name="strQuery"></param>
  5.  
    /// <returns></returns>
  6.  
    [HttpGet]
  7.  
    public string Get(string strQuery)
  8.  
    {
  9.  
    //一个参数的时候,如果前端是传过来的是字符串的json可以反序列化成对象。
  10.  
    //TbCharging oData = Newtonsoft.Json.JsonConvert.DeserializeObject<TbCharging>(strQuery);
  11.  
    //return String.Format("{0},{1},{2},{3}", oData.Id, oData.Name, oData.Des, oData.CreateTime.ToString("yyyy-MM-dd hh:mm:ss"));
  12.  
    return "一个参数" + strQuery;
  13.  
    }


备注:在Get方式的时候我们也可以把参数放在url,我这里为了前台写得统一些,全都放在data里面,感觉好看一点。

3、多个参数

 

  1.  
    //Get多个参数
  2.  
    var get_f3 = function() {
  3.  
    $.ajax({
  4.  
    type: "get",
  5.  
    url: "/api/Demo",
  6.  
    data: { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },
  7.  
    success: function(data, status) {
  8.  
    if (status == "success") {
  9.  
    $("#div_test").html(data);
  10.  
    }
  11.  
    }
  12.  
    });
  13.  
    }

后台控制器方法

 

  1.  
    /// <summary>
  2.  
    /// 多个参数
  3.  
    /// </summary>
  4.  
    /// <param name="Id"></param>
  5.  
    /// <param name="Name"></param>
  6.  
    /// <param name="CreateTime"></param>
  7.  
    /// <returns></returns>
  8.  
    [HttpGet]
  9.  
    public string Get(int Id, string Name, DateTime CreateTime)
  10.  
    {
  11.  
    return String.Format("多个参数,{0},{1},{2}", Id, Name, CreateTime.ToString("yyyy-MM-dd hh:mm:ss"));
  12.  
    }

 

4、一个实体对象参数

 

  1.  
    //Get实体对象作为参数
  2.  
    var get_f4 = function() {
  3.  
    $.ajax({
  4.  
    type: "get",
  5.  
    url: "/api/Demo/GetModel",
  6.  
    data: { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },
  7.  
    success: function(data, status) {
  8.  
    if (status == "success") {
  9.  
    $("#div_test").html(data);
  10.  
    }
  11.  
    }
  12.  
    });
  13.  
    }


备注:到这里有没有发现多个参数和一个实体对象的请求方法是一样的,假如两个接收的方法都写在同一个控制器里面的话,路由是区分不出来要匹配那个方法处理,

所以要用自定义路由来区分,在WebApi里面改方法名字是没有用的。

后台控制器方法

 

  1.  
    /// <summary>
  2.  
    /// 一个实体对象参数
  3.  
    /// </summary>
  4.  
    /// <param name="oData"></param>
  5.  
    /// <returns></returns>
  6.  
    [HttpGet]
  7.  
    [Route("GetModel")]
  8.  
    public string Get([FromUri]TbCharging oData)
  9.  
    {
  10.  
    return String.Format("一个实体对象参数,{0},{1},{2},{3}", oData.Id, oData.Name, oData.Des, oData.CreateTime.ToString("yyyy-MM-dd hh:mm:ss"));
  11.  
    }


备注:在使用Get传递实体对象参数的时候要注意,因为Get方式的时候参数是写在url的,所以我们在后台用[FromBody]是拿不到实体参数的,需要写[FromUri]才行。

Post方式

Post方式我们一般用来做增、删、改操作。在WebApi中Post仅仅用来做增加操作,修改用Put,删除用Delete。这些在新建模板的时候就自动为我们生成了。

还有要提一下的是Post只能传递一个参数,如果需要多个参数的时候我们需要把它们合并成一个扩展对象,当做对象来传递。

在后台接收的时候我们需要在参数列表里面写上[FromBody]因为Post方式的参数就不在Url里面了。

1、一个参数

  1.  
    //Post一个参数
  2.  
    var post_f1 = function() {
  3.  
    $.ajax({
  4.  
    type: "post",
  5.  
    url: "/api/Demo",
  6.  
    data: { "": "Jim" },
  7.  
    //data: "=Jim", //两种写法,其他写法获取不到值
  8.  
    success: function(data, status) {
  9.  
    if (status == "success") {
  10.  
    $("#div_test").html(data);
  11.  
    }
  12.  
    }
  13.  
    });
  14.  
    }

 

注意:在写参数的时候我们不能把参数写成 data:{"name":"Jim"} 这种方式,因为在后台是拿不到值的。

后台控制器方法

 

  1.  
    /// <summary>
  2.  
    /// 一个参数
  3.  
    /// </summary>
  4.  
    /// <param name="name"></param>
  5.  
    /// <returns></returns>
  6.  
    public string Post([FromBody]string name)
  7.  
    {
  8.  
    return "一个参数," + name;
  9.  
    }

2、一个实体对象参数

 

  1.  
    //Post一个对象(Post不能提交多个参数,只能将多个参数封装成一个对象)
  2.  
    var post_f2 = function () {
  3.  
    var postdata = { Id: "1", Name: "Jim", CreateTime: "1988-09-11" };
  4.  
    $.ajax({
  5.  
    type: "post",
  6.  
    url: "/api/Demo/PostAdd",//多个post的时候,路由会匹配不到,所以要自定义路由
  7.  
    //data: { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },
  8.  
    data: postdata,
  9.  
    success: function (data, status) {
  10.  
    if (status == "success") {
  11.  
    $("#div_test").html(data);
  12.  
    }
  13.  
    }
  14.  
    });
  15.  
    }

后台控制器方法

 

  1.  
    /// <summary>
  2.  
    /// 一个对象
  3.  
    /// </summary>
  4.  
    /// <param name="oData"></param>
  5.  
    /// <returns></returns>
  6.  
    [HttpPost]
  7.  
    [Route("PostAdd")]
  8.  
    public object Post([FromBody]TbCharging oData)
  9.  
    {
  10.  
    var strName = String.Format("一个对象,{0},{1}", oData.Id, oData.Name);
  11.  
    return strName;
  12.  
    }

备注:这里参数列表最好写上[FromBody],虽然不写也能拿到值。

3、一个数组参数

 

  1.  
    //Post数组作为参数
  2.  
    var post_f3 = function () {
  3.  
    var arr = ["1", "2", "3", "4"];
  4.  
    $.ajax({
  5.  
    type: "post",
  6.  
    url: "/api/Demo/PostArray",
  7.  
    contentType: 'application/json',
  8.  
    data: JSON.stringify(arr),
  9.  
    success: function (data, status) {
  10.  
    if (status == "success") {
  11.  
    $("#div_test").html(data);
  12.  
    }
  13.  
    }
  14.  
    });
  15.  
    }

这里我们说一下contentType和dataType。

contentType 

发送信息至服务器时内容编码类型。假如你不写的话,默认值是: "application/x-www-form-urlencoded"。

dataType

预期服务器返回的数据类型。

如果我们Post提交的是json参数,最好就写上 contentType: 'application/json'

后台的控制器方法

 

  1.  
    /// <summary>
  2.  
    /// 数组作为参数
  3.  
    /// </summary>
  4.  
    /// <param name="ids"></param>
  5.  
    /// <returns></returns>
  6.  
    [HttpPost]
  7.  
    [Route("PostArray")]
  8.  
    public object Post(string[] ids)
  9.  
    {
  10.  
    return String.Format("{0},{1},{2}", ids[0], ids[1], ids[2]);
  11.  
    }

4、实体集合参数

 

  1.  
    //Post对象集合,多个相同对象(多个不同对象的时候可以将多个对象封装成一个扩展对象)
  2.  
    var post_f4 = function () {
  3.  
    var arr = [
  4.  
    { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },
  5.  
    { Id: "2", Name: "Lilei", CreateTime: "1990-12-11" },
  6.  
    { Id: "3", Name: "Lucy", CreateTime: "1986-01-10" }
  7.  
    ];
  8.  
    $.ajax({
  9.  
    type: "post",
  10.  
    url: "/api/Demo/PostMulti",//多个post的时候,路由会匹配不到,所以要自定义路由
  11.  
    contentType: 'application/json',
  12.  
    data: JSON.stringify(arr),
  13.  
    success: function (data, status) {
  14.  
    if (status == "success") {
  15.  
    $("#div_test").html(data);
  16.  
    }
  17.  
    }
  18.  
    });
  19.  
    }

后台的控制器方法

 

  1.  
    /// <summary>
  2.  
    /// 对象集合
  3.  
    /// </summary>
  4.  
    /// <param name="lstCharging"></param>
  5.  
    /// <returns></returns>
  6.  
    [HttpPost]
  7.  
    [Route("PostMulti")]
  8.  
    public object Post([FromBody]List<TbCharging> lstCharging)
  9.  
    {
  10.  
    return String.Format("{0},{1}", lstCharging[0].Name, lstCharging[1].Name);
  11.  
    }

自定义路由

使用场景:用于方法重载,忽略方法名,自定义url

使用步骤:

1、在控制器类上方加入一个标记

 

  1.  
    [RoutePrefix("api/Demo")]
  2.  
    public class DemoController : ApiController
  3.  
    {}

 

2、在方法中加入路由标记

 

  1.  
    /// <summary>
  2.  
    /// 数组作为参数
  3.  
    /// </summary>
  4.  
    /// <param name="ids"></param>
  5.  
    /// <returns></returns>
  6.  
    [HttpPost]
  7.  
    [Route("PostArray")]
  8.  
    public object Post([FromBody]string[] ids)
  9.  
    {
  10.  
    return String.Format("{0},{1},{2}", ids[0], ids[1], ids[2]);
  11.  
    }


备注:上面的api/Demo和PostArray可以自己定义名字。像我这样写就可以直接用 url:"/api/Demo/PostArray"来访问了。

posted @ 2018-08-30 15:21 armyfai 阅读(...) 评论(...) 编辑 收藏