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

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

Get方式

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

一、无参

 

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.  
    }

二、一个参数

 

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里面，感受好看一点。

三、多个参数

 

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.  
    }

 

四、一个实体对象参数

 

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.  
   //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.  
   }

二、一个实体对象参数

 

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]，虽然不写也能拿到值。

三、一个数组参数

 

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.  
    }

四、实体集合参数

 

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.  
   [ RoutePrefix("api/Demo")]
2.  
   public class DemoController : ApiController
3.  
   {}

 

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

 

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"来访问了。