WebAPI请求——js调⽤
继续接着上⽂来看看对于⼀般前台页⾯发起的get和post请求，我们在Web API中要如何来处理。
这⾥我使⽤Jquery 来发起异步请求实现数据调⽤。
继续使⽤上⼀⽂章中的⽰例，添加⼀个index.html页⾯，添加对jquery的引⽤。
⼀、⽆参数Get请求
⼀般的get请求我们可以使⽤jquery提供的$.get() 或者$.ajax({type:"get"}) 来实现：
请求的后台Action⽅法仍为上篇⽂章中的GetUser() :
也可以⽤$.ajax({type:"get"}) ⽅式，正确的获得了返回数据：
⼆、传递⼀个参数的Get请求
通常我们需要传递参数只需要指定ajax⽅法的data属性即可： data:{"name":"赵⼤宝"}
后台正确的返回数据：
三、传递两个或多个参数的Get请求
按照上⾯的⽅法，对于多个参数我们可以很容易就写出来： data:{"name":"赵⼤宝","age":12}
后台正确的返回数据：
四、⽆参数的Post请求
我们可以使⽤$.post() 或$.ajax({type:"post"}) 来发起post请求：
后台正确的返回了数据：
五、传递⼀个参数的Post请求：
⾸先这⾥需要提醒⼤家⼀下，我们在修改完后台代码后，如果没有重新⽣成项⽬，那么在请求时就会报错：“未到与请求***匹配的HTTP资源” ：
所以，我们只要我们修改了后台代码，就⼀定要重新⽣成⼀下：
不过，当我们重新⽣成项⽬，再次发送请求，看到的仍然是404错误，再次检查⼀番代码，也没有发现是哪⾥的问题。
事实上，ASP.NET Web API能够正确的识别我们的UserController控制器处理Post /api/user ，但却不能到⼀个可以接受的⽅法来处理请求。
也就是说，Web API接收到的请求能够到User控制器，但在该控制器中不到名称为Def 的这个Action。
那我们要怎么来解决呢？
通过搜索MSDN上Web API官⽹中的说明，我们可以到下⾯的⼀段介绍：
即在Action ⽅法中我们需要使⽤ [FromBody] 属性标签来标明属性。
修改后，再次发送请求，我们可以看到，Status Code 为200，请求发送成功。
可以看到，在post请求中，⽅法的参数必须要⽤ [FromBody] 属性来修饰才可以， [FromBody] 就告诉Web API 要从post请求体重去获取参数的值。
但让我们诧异的却是，后台返回的数据中name的值为空。
通过调试，我们可以看到，后台Action 中接收到的name值为null。
js获取json的key和value 通过上⾯的测试我就也能够猜测到，Web API 要求请求传递的 [FromBody] 参数，肯定是有⼀个特定的格式，才能被正确的获取到。⽽这种特定的格式并不是我们常见的 key=value 的键值对形式。Web API 的模型绑定器希望到 [FromBody] ⾥没有键名的值，也就是说，不是
key=value ，⽽是 =value 。
现在，咱们把data中的key设置为空，然后再次发送请求：
测试可见，后台正确的接收到了数据:
六、传递两个参数的Post请求
按理说，⼀个参数的请求实现了，那么传递两个或者多个参数也就很顺利了，对于两个参数的后台接收⽅法，我们可能会这样来写:
但事实证明，这样是错误的。
那到底两个或者多个参数我们要怎样来定义呢？
再次查看官⽹中的介绍，我们了解到：
也就是说，[FromBody] 修饰的参数只能有⼀个。我们需要对传递的多个参数进⾏封装才⾏。
这⾥，我们可以将 Name和 Age 封装成⼀个Student 类：
前台页⾯再次发送请求：
Status Code为200，请求成功，并正确获取到后台返回的数据：
这⾥，我们通过上⾯图⽚中的请求头数据可以看到，Form Data 的格式是 key=value&key=value 这种表单数据格
式 Name=%E8%B5%B5%E5%A4%A7%E5%AE%9D&Age=13 ，我们平时使⽤的⽐较多的⼀般为json格式。这⾥，我们使⽤ JSON.stringify() 来序列化数据。
再次发送请求：
可以看到，From Data 中数据的格式为json字符串，Status Code为200，请求正确，但结果⼜出错了，后台⼜没有接收到数据参数：
那么问题到底出在哪呢？
我们再次查看上图中请求头内容，注意到，虽然我们传递的数据格式是json字符串，但请求头中的Content-type 却为
application/x-www-form-urlencoded ，并不是json格式对于的 application/json 。⽽编码格式 application/x-www-form-urlencoded 表⽰的是：窗体数据被编码为名称/值对。
这⾥，也就是我想要说的⼀个注意点。平时我们在使⽤json数据的时候，很容易就忘记了要指定 Content-type 为 "application/json" ，所以就容易导致很多“想不到”的错误。
所以，我们在 $.ajax() 中指定 Content-type :
这次，后台正确的接收并返回了数据：
七、传递多个参数的Post请求
有了上⾯的经验，传递多个参数的post请求我们就很容易能写出来了：
后台接收并返回数据：
⼋、传递多个不同对象的Post请求
有时候我们还会遇到需要传递多个不同对象参数的情况，对于这种特殊的情况在 Json.Net 中为我们提供了⼀个名为 JObject 的通⽤对象容器，我们可以通过 .对象名的⽅式来动态的遍历参数⾥⾯的属性的值，然后动态的转换和json类型中对应的属性类型。
⽐如：
后台调试，通过dynamic 动态转换获取属性的值：
后台正确的返回了数据：
九、获取不同类型的数据
⼀般我们获取到后台返回的数据格式类型为 json格式，我们也可以指定请求头中的输出类型来获得不同的返回类型数据：
指定输出类型为xml格式：
指定输出类型为 json格式：
基本到这⾥，这篇⽂章的主要内容也就算说完了，其中的重点还是 Post请求中对于参数的处理是需要重点注意的。
上⾯我们在测试的过程中，都是通过⾃⼰创建的Controller控制器类来对参数进⾏接收处理，可能有⼈会问，我们这么写到底是否符合规范呢，Web API中默认是怎么来处理的呢？这⾥，Visual Studio 中也为我们⾃带了 Web API控制器类：
我们可以添加新建项选择 Web API控制器类即可：
这⾥我们可以看到，默认创建的Controller控制器类中，对于Post请求的Action⽅法都⾃带了 [FromBody] 属性。现在不⽤我说，你也已经知道为什么它会为参数默认带⼀个 [FromBody]属性吧！
好了，今天的内容就到这⾥，下⾯附上我参考的⼏篇⽂章：
MSDN中关于Web API 中 [FromBody] 的介绍：
关于[FromBody]属性的介绍及Post参数说明（E⽂）：
上⾯⽹页⽂章的翻译版本：
Post 多个参数到Web API的总结：
附当前项⽬的代码：
转载请注明出处。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论