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

        //Get没有参数
        var get_f1 = function() {
            $.ajax({
                type: "get",
                url: "/api/Demo",
                success: function(data, status) {
                    if (status == "success") {
                        $("#div_test").html(data);
                    }
                }
            });
        }

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

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

后台控制器方法

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

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

备注：在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. }

        //Get多个参数
        var get_f3 = function() {
            $.ajax({
                type: "get",
                url: "/api/Demo",
                data: { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },
                success: function(data, status) {
                    if (status == "success") {
                        $("#div_test").html(data);
                    }
                }
            });
        }

后台控制器方法

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

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

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

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

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

所以要用自定义路由来区分，在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. }

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

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

Post方式

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

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

在后台接收的时候我们需要在参数列表里面写上[ print?

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

        //Post一个参数
        var post_f1 = function() {
            $.ajax({
                type: "post",
                url: "/api/Demo",
                data: { "": "Jim" },
                //data: "=Jim", //两种写法，其他写法获取不到值
                success: function(data, status) {
                    if (status == "success") {
                        $("#div_test").html(data);
                    }
                }
            });
        }

 

注意：在写参数的时候我们不能把参数写成 print?

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

        /// <summary>
        /// 一个参数
        /// </summary>
        /// <param name="name"></param>
        /// <returns></returns>
        public string Post([FromBody]string name)
        {
            return "一个参数，" + name;
        }

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

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

后台控制器方法

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

        /// <summary>
        /// 一个对象
        /// </summary>
        /// <param name="oData"></param>
        /// <returns></returns>
        [HttpPost]
        [Route("PostAdd")]
        public object Post([FromBody]TbCharging oData)
        {
            var strName = String.Format("一个对象，{0},{1}", oData.Id, oData.Name);
            return strName;
        }

备注：这里参数列表最好写上[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. }

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

这里我们说一下contentType和dataType。

contentType

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

dataType

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

如果我们Post提交的是json参数，最好就写上 print?

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

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

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

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

后台的控制器方法

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

        /// <summary>
        /// 对象集合
        /// </summary>
        /// <param name="lstCharging"></param>
        /// <returns></returns>
        [HttpPost]
        [Route("PostMulti")]
        public object Post([FromBody]List<TbCharging> lstCharging)
        {
            return String.Format("{0},{1}", lstCharging[0].Name, lstCharging[1].Name);
        }

自定义路由

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

使用步骤：

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

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

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

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

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

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