• WebAPI学习日记一: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 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,文中蛮多地方,都是自己去测试,去找资料,所以有些地方还不能很好的解释,但我相信这并不结束,而是开始。

     

     

     

     

  • 相关阅读:
    InnoDB On-Disk Structures(三)--Tablespaces (转载)
    InnoDB On-Disk Structures(二)--Indexes (转载)
    InnoDB On-Disk Structures(一)-- Tables (转载)
    UML之状态图
    UML之活动图
    UML交互图
    UML类图
    UML用况图
    UML OOA
    UML问题定义
  • 原文地址:https://www.cnblogs.com/yzcStudy/p/5767109.html
Copyright © 2020-2023  润新知