WebAPI学习日记一:Ajax请求传递参数遇到的问题

首先,本人大学刚毕业,想把自己学习的一些东西记录下来,也是和大家分享,如有不对之处还请多加指正。
声明:但凡是我博客里的文章均是本人实际操作遇到的例子,不会随便从网上拷贝或者转载,本着对自己和观众负责的态度。

什么是WebAPI?我的理解是WebAPI+JQuery(前端)基本上能完成Web MVC的功能,即:这么理解吧,WebAPI相当于Web MVC的后台部分。

接下来直接上例子吧,都是我在学习过程中遇到或者发现的一些问题。

 一、创建WebAPI项目

(这个环节不是本章重点)

二、传递参数遇到的问题

  (ps:创建HTML前端页面访问API接口的时候就不要把页面建在MVC的View视图下了,因为它首会先根据MVC的规则来找,到时候自然访问不了。)

后台实体类(Person):

 1 namespace WebApi.Models
 2 {
 3     public class Person
 4     {
 5
 6         public int ID { get; set; }
 7         public string Name { get; set; }
 8         public string EnglishName { get; set; }
 9     }
10 }

  后台接口:

 1     public class TestController : ApiController
 2     {
 3         public Person GetEnglishName(int ID, string Name)
 4         {
 5             Person man = new Person();
 6             man.ID = ID;
 7             man.Name = Name;
 8             man.EnglishName = "Bert";
 9             return man;
10         }
11     }

  前端Ajax请求:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <meta charset="utf-8" />
 7 </head>
 8 <body>
 9     <input  type="submit" id="testId"/>
10     <input  type="text" id="text1"/>
11 </body>
12 </html>
13 <script src="Scripts/jquery-1.10.2.min.js"></script>
14 <script type="text/javascript">
15     $("#testId").click(function () {
16         $.ajax({
17             url: "/api/Test/GetEnglishName",
18             type: "GET",
19             data: { "ID": 1, "Name": "yzc" },
20             success: function (data) {
21                 $("#text1").val(data.EnglishName);
22             }
23         });
24     });
25 </script>

  结果:

 如上,这是最普通的一次访问WebApi的的Ajax请求,接下来我们来讲几个比较特殊的例子,希望能加强对WebAPI传参的理解和使用。

①代码修改如下:

 1     public class TestController : ApiController
 2     {
 3         public Person SetEnglishName(int ID, string Name)
 4         {
 5             Person man = new Person();
 6             man.ID = ID;
 7             man.Name = Name;
 8             man.EnglishName = "Bert";
 9             return man;
10         }
11     }
 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4     <title></title>
 5     <meta charset="utf-8" />
 6 </head>
 7 <body>
 8     <input  type="submit" id="testId"/>
 9     <input  type="text" id="text1"/>
10 </body>
11 </html>
12 <script src="Scripts/jquery-1.10.2.min.js"></script>
13 <script type="text/javascript">
14     $("#testId").click(function () {
15         $.ajax({
16             url: "/api/Test/SetEnglishName",
17             type: "GET",
18             data: { "ID": 1, "Name": "yzc" },
19             success: function (data) {
20                 $("#text1").val(data.EnglishName);
21             }
22         });
23     });
24 </script>

结果:

结论:这里我们仅仅只是更改了接口的名称而已,从GetEnglishName改为SetEnglishName,为什么就找不到该方法了呢?原因是:WebAPI对于后台方法接口在没有给它添加

访问方式的前提下(如:[HttpPost]),并且方法名称开头带着Get的话,默认是Get请求。所有在上面例子中,方法名既没有标明请求方式,也不是Get开头,它自然找不到可以

允许访问的方法了,建议:不管是什么类型的请求都在方法上添访问类型。

 ②post请求传递一个参数的时候,data并不是传的键/值对形式,而是data:{"":"yzc"},记住这种特殊情况,不然后台是获取不到前端传过去的值得,至于原因是:Web API 要求请求传递的 [FromBody] 参数,是有一个特定的格式,才能被正确的获取到。

 ③post传递多个参数的时候 (被标记[FromBody]的参数只能出现一次,被标记为[FromUri]的参数可以出现多次,如果被标记为[FromUri]的参数是简单参数,该标记可以去掉。)

请求的时候1、data:JSON.stringify(x)和contentType: "application/json"一起使用,或者2、data:{为键值对},并且不能加contentType: "application/json",这两种情况

后台[FromBody]参数都能获取到值。(经测试过,当出现交叉情况,如:data里面为键值对,且加了contentType: "application/json",后台将不能访问数据)

 ④当post请求的参数多的时候,就需要封装在一个类里面,这样后台也需要创建临时类来接收,而dynamic可以让我们省掉许多类。

然而前端Ajax请求参数的配置目前只有data:JSON.stringify(x)和contentType:"application/json"一起后台才能拿到数据。

 前端请求:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <meta charset="utf-8" />
 7 </head>
 8 <body>
 9     <input  type="submit" id="testId"/>
10     <input  type="text" id="text1"/>
11 </body>
12 </html>
13 <script src="Scripts/jquery-1.10.2.min.js"></script>
14 <script type="text/javascript">
15     $("#testId").click(function () {
16         $.ajax({
17             url: "/api/Test/GetEnglishName",
18             type: "POST",
19             contentType: "application/json",
20             data:JSON.stringify({ "ID": 1, "Name": "yzc"}),
21             success: function (data) {
22                 $("#text1").val(data.EnglishName);
23             }
24         });
25     });
26 </script>

 后台接口:

 1     public class TestController : ApiController
 2     {
 3         [HttpPost]
 4         public Person GetEnglishName(dynamic per)
 5         {
 6             Person man = new Person();
 7             man.ID = per.ID;
 8             man.Name = per.Name;
 9             man.EnglishName = "Bert";
10             return man;
11         }
12     }

 结果:

三、总结:

  本文关于Web API参数请求的情况并没有全部写出来,而是根据本人在学习过程中遇到的一些问题特意记录下来,讲的不明白的地方欢迎讨论交流。我觉得学习软件就得知其然,知其所以然,但由于也是刚接触这个Web API,文中蛮多地方,都是自己去测试,去找资料,所以有些地方还不能很好的解释,但我相信这并不结束,而是开始。

时间: 2025-01-19 14:47:40

WebAPI学习日记一:Ajax请求传递参数遇到的问题的相关文章

Ajax请求传递参数遇到的问题

想写个同类型的,代码未测. 什么是WebAPI?我的理解是WebAPI+JQuery(前端)基本上能完成Web MVC的功能,即:这么理解吧,WebAPI相当于Web MVC的后台部分. 接下来直接上例子吧,都是我在学习过程中遇到或者发现的一些问题.  一.创建WebAPI项目 (这个环节不是本章重点) 二.传递参数遇到的问题 后台实体类(Person): 1 namespace WebApi.Models 2 { 3 public class Person 4 { 5 6 public int

Java RestTemplate post请求传递参数遇到的坑

https://blog.csdn.net/LDY1016/article/details/80002126 最近使用Spring 的 RestTemplate 工具类请求接口的时候发现参数传递的一个坑,也就是当我们把参数封装在Map里面的时候,Map 的类型选择. 使用RestTemplate post请求的时候主要可以通过三种方式实现 1.调用postForObject方法  2.使用postForEntity方法 3.调用exchange方法 postForObject和postForEn

Ajax中Put和Delete请求传递参数无效的解决方法(Restful风格)

本文装载自:http://blog.csdn.net/u012737182/article/details/52831008    感谢原文作者分享 开发环境:Tomcat9.0 在使用Ajax实现Restful的时候,有时候会出现无法Put.Delete请求参数无法传递到程序中的尴尬情况,此时我们可以有两种解决方案:1.使用地址重写的方法传递参数.2.配置web.xml项目环境. 测试的程序为: @RequestMapping(value = "/member", method =

http请求传递参数浅析

方法 常见http传递参数类型param.data.json param http://url?param1=xx&param2=xx 直接将参数放在请求url的后面,多个参数之间用&分隔: 参数直接以明文方式传递,最简单的方式.GET.POST都支持 不适合传复杂格式的参数,最不安全 data 请求会将参数放在http包体里面,GET方法不支持 Content-Length表示包体长度,跟一段参数这里参数是作为字符串进行传递 测试 curl -X POST -d '{"body

jsp基础学习(六)--jsp传递参数方法

前言:不管是用什么方法传递的数据,后台都是依靠request.getAttribute()处理的. 1.form表单 2.request.setAttribute();和request.getAttribute(); 3.超链接:<a herf="index.jsp"?a=a&b=b&c=c>name</a> 4.<jsp:param> 下面一一举例说明: 1.form表单 form.jsp: <%@page contentTy

分页技术框架(Pager-taglib)学习三(pager-taglib中传递参数时中文乱码问题)

一.问题描述 问题: 使用<pg:param name="key" />标签传递中文参数时,会有乱码. 原因: 因为它默认是用gb2312来对添加的参数进行编码,如果你的过滤器.jsp页面都是采用的gb2312就没有什么问题,如果你采用的是utf-8来编码,那么中文参数传递过程中就会出现乱码导致无法解析.   二.问题解决方法 网上有很多解决办法,重新修改编译源代码是一种方法: 在com\jsptags\navigation\pager下面的PagerTag的addPara

ajax如何传递参数给controller

前台: 'type'        : 'post', 'contentType' : 'application/json;charset=UTF-8', 'data'        : JSON.stringify(JsonObject), 其中JsonObject就是你组装的JSON对象 后台: @RequestMapping(value = "/query", method = RequestMethod.POST) @ResponseBody public Map query(

ajax请求参数为中文乱码的情况

前提是ajax请求传递参数对象到后台,对象中的某个参数的值为中文,到后台之后出现乱码,导致报错.问题解决如下: rest层:

封装的ajax请求

在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到ajax请求,我们通常需要获取表单中的数据,发起ajax请求,通过服务程序,与数据库的数据进行比对,判断信息的正确与否.这儿也将ajax请求进行了封装,当我们在项目中需要多次ajax请求时,就可以用封装的函数了,不用每次都写ajax请求,提高了代码的利用率和工作效率.当然封装得不一定很完美,网上也有很多优秀的封装好的ajax请求.也是通过闭包思想,具体的封装思路,在代码注释中也写得很详细了 这是封装的aja