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

时间 2019-11-19

标签 webapi 学习日记 ajax 请求传递参数遇到问题栏目 Ajax 繁體版

原文原文链接

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

什么是WebAPI？个人理解是WebAPI+JQuery（前端）基本上能完成Web MVC的功能，即：这么理解吧，WebAPI至关于Web MVC的后台部分。html

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

1、建立WebAPI项目java

（这个环节不是本章重点）jquery

2、传递参数遇到的问题ajax

后台实体类（Person）：json

 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 }

　　后台接口：api

 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请求：app

 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>

　　结果：post

　如上，这是最普通的一次访问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]的参数是简单参数，该标记能够去掉。)

请求的时候一、data：JSON.stringify(x)和contentType: "application/json"一块儿使用，或者二、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     }

　结果：

3、总结：

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