C# WebApi传参之Post请求-AJAX

13 篇文章 0 订阅
2 篇文章 0 订阅

最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来。

   十年河东十年河西,莫欺少年穷。 

   学无止境,精益求精

   上一节讲述了C# WebApi传参之Get请求-AJAX

   本节讲述C# WebApi传参之Post请求-AJAX,说起Ajax针对webApi的Post请求,真的不敢恭维,确实比较怪异,如果你不幸要写一个Ajax Post请求webApi接口,那么您还是有必要花点时间看看本篇博客,如果你也遇到了同样的问题,就不妨在最后给本篇博客点个赞。谢谢

   说起Post请求,想必大家都比较熟悉,post请求原理和get请求不一样,我们知道get请求的参数是通过url来传递的,而post请求则是通过http的请求体中传过来的,WebApi的post请求也需要从http的请求体里面去取参数。说白了Get请求是通过URL传递一组键值对,Post请求是发送一个Http请求体。上一节Get请求,我们用到了[FromUri]关键字。本节的Post请求,我们将使用另一个关键字[FromBoay],上一节结尾我建议大家Get请求时要带上[FromUri]关键字,同理,本节的Post请求,我要建议大家在接收参数时,带上[FromBody]关键字,毕竟养成一个好的习惯不是什么坏事。

   开篇中提到,Ajax Post请求webApi很怪异,那么它究竟怎么怪异呢?下面以代码示范说明:<本文仍旧采用上一节Get请求的实体对象,不知道的博友,请参阅我的上篇博客>

   如下:

复制代码
        /// <summary>
        /// 简单测试案例
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public string Get()
        {
            return "OK";
        }
        /// <summary>
        /// 通过id获取特定数据
        /// </summary>
        /// <param name="Id"></param>
        /// <returns></returns>
        [HttpPost]
        public string GetById([FromBody]int Id)
        {
            list = list.Where(p => p.Id == Id).ToList();
            return JsonHelper.JsonSerializer<List<Person>>(list);
        }
复制代码

   aJax如下

复制代码
        //无参数请求-简单示例
        $(document).ready(function () {
            $.ajax({
                url: "http://localhost:9953/api/Person/Get",
                type: "post",
                contentType: "application/json",
                dataType: "text",
                data:{},
                success: function (result,status) {
                    if (status == "success") {
                        alert(result);
                    }
                },
                error: function (error) {
                    alert(error);
                }
            });
        });
        //单个参数传递-  data: {"":"3"}, 这种方式也竟然正确
        $(document).ready(function (data) {
            $.ajax({
                url: "http://localhost:9953/api/Person/GetById",
                type: "post",
                contentType: "application/json",
                dataType: "text",
                data: {Id:"3"},
                success: function (result,status) {
                    alert(result)
                },
                error: function (error) {
                    alert(error);
                }
            });
        });
复制代码

   上文JS中注释有这么一句话:‘data: {"":"3"}, 这种方式也竟然正确’

   这是一种另许多人头痛的写法,但是没办法,经过测试,这种写法确实很正确。

   根据上述案例,我们看到了Post请求传递单个参数的写法,那么如果传递多个参数,我们能否采取如下的方法?(经测试,如下写法是错误的,报404Not Found)

复制代码
  $(document).ready(function (data) {
            $.ajax({
                url: "http://localhost:9953/api/Person/GetByIdAndSex",
                type: "post",
                contentType: "application/json",
                dataType: "text",
                data: { Id: "3",Sex:"W" },
                success: function (result, status) {
                    alert(result)
                },
                error: function (error) {
                    alert(error);
                }
            });
        });
复制代码
复制代码
        /// <summary>
        /// 错误的写法    当然,本篇只讲解Ajax请求,如果你是通过HttpwebClient的方式进行请求,这种写法是没有任何问题的
        /// </summary>
        /// <param name="Json"></param>
        /// <returns></returns>
        [HttpPost]
        public HttpResponseMessage GetByIdAndSex([FromBody]string Id,[FromBody]string Sex)
        {
            List<Person> list_2 = new List<Person>();
            var Result = from r in list
                         where r.Id == Convert.ToInt32(Id) && r.Sex == Sex
                         select r;
            foreach (var Item in Result)
            {
                list_2.Add(Item);
            }
            return ResultToJson.toJson(list_2);
        }
复制代码

   测试的结果是:获取不到Id 和 Sex 的值!开篇我们说到,Get的请求方式是通过URL传递键值对,而Post 请求传递的是一个Http请求体,而JS中 data: { Id: "3",Sex:"W" }, 采用的是键值对类型,而Post请求是不能读取键值对滴。故:上述写法不对。

   那么,你可能会问,为什么一个参数请求的时候没有问题,为什么两个参数就不行了呢?这个...我能作的解答是:这就是Post Ajax请求的怪异之处。

   正确的写法该当如何呢?

   我们知道:Get请求传递兼职对,Post请求传递的是Http的请求体,按照本人的理解就是:Post请求需要发送一个参数作为Http请求体,这个参数为一个整体,而非一组键值对、故而,我们作如下改动:

   代码如下:

复制代码
 //多个参数传递
        $(document).ready(function (data) {
            $.ajax({
                url: "http://localhost:9953/api/Person/GetByIdAndSex",
                type: "post",
                contentType: "application/json",
                dataType: "text",
                data: JSON.stringify({ Id: "3",Sex:"W" }),
                success: function (result, status) {
                    alert(result)
                },
                error: function (error) {
                    alert(error);
                }
            });
        });
复制代码
复制代码
        /// <summary>
        /// 错误的写法2 怪异吧
        /// </summary>
        /// <param name="Json"></param>
        /// <returns></returns>
        [HttpPost]
        public HttpResponseMessage GetByIdAndSex([FromBody]string Json)
        {
            string Id = JsonHelper.GetJsonValue(Json, "Id");//获取Id
            string Sex = JsonHelper.GetJsonValue(Json, "Sex");//获取sex
            List<Person> list_2 = new List<Person>();
            var Result = from r in list
                         where r.Id == Convert.ToInt32(Id) && r.Sex == Sex
                         select r;
            foreach (var Item in Result)
            {
                list_2.Add(Item);
            }
            return ResultToJson.toJson(list_2);
        }
复制代码

   如上注释为红色加粗的JS代码,我们将Post的键值对转化为Json字符串传递到后端。而后端代码中,我们尝试接收这个JSon字符串,并作解析,从中读出Id和Sex的值,按照Post请求规则,我们也是只发送了一个Http请求体,并且在后端作了接收。这次应该没有问题了吧?

   实际测试的结果是:不会发生404 Not Found 错误,但是接收不到Post的字符串,也就是 [FromBody]string Json 中的Json为Null,(⊙o⊙)…

   靠,这样都不行,那到底怎么能行呢?

   下班了,不多喷了,直接告诉大家几点注意事项:

   后端接收时,参数类型应采用dynamic,JS代码中,必须加上contentType对应的类型,Post的值必须为一个整体,而不能是键值对。JS中Type类型必须为Post ,后端接收类型必须为:[HttpPost],如果不加,则会默认为[HttpGet]方式。

   以下是代码示例,希望能帮助大家:

   1、多个参数传递:

复制代码
 //多个参数传递
        $(document).ready(function (data) {
            $.ajax({
                url: "http://localhost:9953/api/Person/GetByIdAndSex",
                type: "post",
                contentType: "application/json",
                dataType: "text",
                data: JSON.stringify({ Id: "3",Sex:"W" }),
                success: function (result, status) {
                    alert(result)
                },
                error: function (error) {
                    alert(error);
                }
            });
        });
复制代码
复制代码
 [HttpPost]
        public HttpResponseMessage GetByIdAndSex([FromBody]dynamic Json)
        {
            string Id = Json.Id;
            string Sex = Json.Sex;
            List<Person> list_2 = new List<Person>();
            var Result = from r in list
                         where r.Id == Convert.ToInt32(Id) && r.Sex == Sex
                         select r;
            foreach (var Item in Result)
            {
                list_2.Add(Item);
            }
            return ResultToJson.toJson(list_2);
        }
复制代码

   2、传递一个对象数据

复制代码
       //传递对象数组
        $(document).ready(function (data) {
            var dataList = [{ Id: "8888", Sex: "", Name: "陈卧龙", Age: "26" },
                            { Id: "8887", Sex: "", Name: "陈大龙", Age: "27" },
                            { Id: "8886", Sex: "", Name: "陈小龙", Age: "25" }];
            $.ajax({
                url: "http://localhost:9953/api/Person/GetByObjectList",
                type: "post",
                contentType: "application/json",
                dataType: "text",
                data: JSON.stringify(dataList),
                success: function (result, status) {
                    alert(result)
                },
                error: function (error) {
                    alert(error);
                }
            });
        });
复制代码
复制代码
/// <summary>
        /// 对象数组作为参数
        /// </summary>
        /// <param name="P"></param>
        /// <returns></returns>
        [HttpPost]
        public HttpResponseMessage GetByObjectList([FromBody]dynamic Plist)
        {
            List<Person> list = new List<Person>();
            foreach (var item in Plist)
            {
                Person person = new Person()
                {
                    Name = item.Name,
                    Sex = item.Sex,
                    Id = item.Id,
                    Age = item.Age,
                };
                list.Add(person);
            }
            return ResultToJson.toJson(list);
        }
复制代码

   到此为止:pOst请求也就讲完了

  我们知道有四大请求:Get,Post,Put,Delete ,其中Put、delete请求都是采用的Post请求原理,他们直接大同小异,无非就是Put请求做修改 插入,Delete请求作删除。因此:Put Delete 请求均可采用本文中的请求方式,只是他们所作的动作不一样罢了!

   好了,回家清蒸鱼喽,最近学的拿手好菜,有喜欢的,欢迎品尝,我们你们邮递!哈哈,看了不评论,不点赞,不是好同志!

   @陈卧龙的博客

https://www.cnblogs.com/chenwolong/p/Post.html

目录 C#进阶系列——WebApi 路由机制剖析:你准备好了吗? ................................................................................................... 3 一、MVC和WebApi路由机制比较 ........................................................................................................................................ 5 1、MVC里面的路由 ......................................................................................................................................................... 5 2、WebApi里面的路由 ................................................................................................................................................... 5 二、WebApi路由基础 ............................................................................................................................................................. 7 1、默认路由 ..................................................................................................................................................................... 7 2、自定义路由 ............................................................................................................................................................... 10 2.1、自定义路由一:匹配到action ................................................................................................................. 11 2.2、自定义路由二 ............................................................................................................................................... 12 3、路由原理 ................................................................................................................................................................... 12 三、WebApi路由过程 ........................................................................................................................................................... 13 1、根据请求的url匹配路由模板 .............................................................................................................................. 13 2、找到控制器 ............................................................................................................................................................... 13 3、找到action ............................................................................................................................................................. 15 四、WebApi特性路由 ........................................................................................................................................................... 16 1、启动特性路由 ........................................................................................................................................................... 17 2、最简单的特性路由 ................................................................................................................................................... 17 3、带参数的特性路由 ................................................................................................................................................... 19 4、参数的约束和默认值 ............................................................................................................................................... 20 5、路由前缀 ................................................................................................................................................................... 20 五、第一个Restful风格的WebApi服务 ......................................................................................................................... 21 六、总结 ................................................................................................................................................................................. 22 C#进阶系列——WebApi 异常处理解决方案 ......................................................................................................................... 23 一、使用异常筛选器捕获所有异常 ..................................................................................................................................... 24 1、接口级别 ........................................................................................................................................................... 31 2、控制器级别 ....................................................................................................................................................... 33 3、全局配置 ........................................................................................................................................................... 34 二、HttpResponseException自定义异常信息 .............................................................................................................. 35 三、返回HttpError ............................................................................................................................................................ 37 四、总结 ................................................................................................................................................................................. 38 C#进阶系列——WebApi 接口返回值不困惑:返回值类型详解 ......................................................................................... 39 一、void无返回值 ............................................................................................................................................................... 40 二、IHttpActionResult .................................................................................................................................................... 42 1、Json(T content) ........................................................................................................................................... 42 2、Ok()、 Ok(T content) ................................................................................................................................. 45 3、NotFound() ............................................................................................................................................................. 47 4、其他 ........................................................................................................................................................................... 49 4.1、Content(HttpStatusCode statusCode, T value) .................................................................. 49 4.2、BadRequest() ............................................................................................................................................ 49 4.3、Redirect(string location) ................................................................................................................ 50 5、自定义IHttpActionResult接口的实现 ............................................................................................................ 50 三、HttpResponseMessage ............................................................................................................................................... 53 四、自定义类型 ..................................................................................................................................................................... 54 五、总结 ................................................................................................................................................................................. 55 C#进阶系列——WebApi 接口参数不再困惑:传参详解 ..................................................................................................... 56 一、get请求 ......................................................................................................................................................................... 57 1、基础类型参数 ........................................................................................................................................................... 57 2、实体作为参数 ........................................................................................................................................................... 58 3、数组作为参数 ........................................................................................................................................................... 62 4、“怪异”的get请求 .................................................................................................................................................. 62 (1)WebApi的方法名称以get开头 ................................................................................................................ 62 (2)WebApi的方法名称不以get开头 ............................................................................................................ 64 二、post请求 ....................................................................................................................................................................... 66 1、基础类型参数 ........................................................................................................................................................... 66 (1)错误的写法 ................................................................................................................................................... 66 (2)正确的用法 ................................................................................................................................................... 67 (1)错误写法 ....................................................................................................................................................... 68 (2)正确用法 ....................................................................................................................................................... 69 (3)推荐用法 ....................................................................................................................................................... 70 2、实体作为参数 ........................................................................................................................................................... 70 (1)单个实体作为参数 ....................................................................................................................................... 70 (2)实体和基础类型一起作为参数传递 ........................................................................................................... 73 3、数组作为参数 ........................................................................................................................................................... 74 (1)基础类型数组 ............................................................................................................................................... 74 (2)实体集合 ....................................................................................................................................................... 74 4、后台发送请求参数的传递 ....................................................................................................................................... 75 三、put请求 ......................................................................................................................................................................... 77 1、基础类型参数 ........................................................................................................................................................... 77 2、实体作为参数 ........................................................................................................................................................... 77 3、数组作为参数 ........................................................................................................................................................... 78 四、delete请求 ................................................................................................................................................................... 78 五、总结 ................................................................................................................................................................................. 79 C#进阶系列——WebApi 身份认证解决方案:Basic基础认证.......................................................................................... 80 一、为什么需要身份认证 ..................................................................................................................................................... 81 1、我们不加身份认证,匿名用户可以直接通过url随意访问接口: ........................................................... 81 2、增加了身份认证之后,只有带了我们访问票据的请求才能访问我们的接口。 ....................................... 82 二、Basic基础认证的原理解析 ......................................................................................................................................... 84 1、常见的认证方式 ....................................................................................................................................................... 84 2、Basic基础认证原理 ............................................................................................................................................... 85 三、Basic基础认证的代码示例 ......................................................................................................................................... 85 1、登录过程 ................................................................................................................................................................... 85 1.1、Web前端 ....................................................................................................................................................... 85 1.2、登录的API接口 .......................................................................................................................................... 86 2、/Home/Index主界面 .............................................................................................................................................. 88 3、WebApiCORS验证部分(重点) ............................................................................................................................ 90 3.1、在WebApiCORS项目里面自定义一个类RequestAuthorizeAttribute,去继承我们的AuthorizeAttribute这个类。然后重写OnAuthorization方法,在这个方法里面取到请求头的Ticket信息,然后校验用户名密码是否合理。 ............................................................................................................. 90 3.2、在具体的Api接口增加我们上面自定义类的特性 .................................................................................. 91 四、优化 ................................................................................................................................................................................. 92 1、解决API的问题 ...................................................................................................................................................... 92 2、解决ajax的问题 .................................................................................................................................................... 93 3、解决特殊不想使用验证的方法 ............................................................................................................................... 94 五、总结 ................................................................................................................................................................................. 95 C#进阶系列——WebApi 跨域问题解决方案:CORS ............................................................................................................. 95 一、跨域问题的由来 ............................................................................................................................................................. 96 二、跨域问题解决原理 ......................................................................................................................................................... 96 三、跨域问题解决细节 ......................................................................................................................................................... 96 1、场景描述 ................................................................................................................................................................... 97 2、场景测试 ................................................................................................................................................................... 99 1)我们不做任何的处理,直接将两个项目运行起来。看效果如何 ............................................................... 99 2)使用CORS跨域 ................................................................................................................................................ 99 3)CORS的具体参数设置。 ............................................................................................................................... 103 四、总结 ............................................................................................................................................................................... 104 C#进阶系列——WebApi 接口测试工具:WebApiTestClient ........................................................................................ 105 一、WebApiTestClient介绍 ........................................................................................................................................... 106 二、WebApiTestClient展示 ........................................................................................................................................... 106 三、WebApiTestClient使用 ........................................................................................................................................... 116 1、如何引入组件 ......................................................................................................................................................... 116 2、如何使用组件 ......................................................................................................................................................... 118 1、修改Api.cshtml文件 ................................................................................................................................. 118 2、配置读取注释的xml路径 ............................................................................................................................ 119 3、测试接口 ......................................................................................................................................................... 121 四、总结 ............................................................................................................................................................................... 123
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值