WebApi

WebApi

1. href="javascript:void(0)"

   • 含义：让超链接去执行一个js函数，而不是跳转到一个地址，void(0)表示一个空的方法，也就是不执行js函数

   • 原理： javascript 是一个伪协议，表示url的内容通过javascript执行，void(0) 表示不作任何操作，这样会防止链接跳转到其他页面，既保留了链接样式，但不让链接执行实际的操作

   • 区别：

     1. <a href="javascript：void(0)" onClick="window.open()"> 和<a href="#" onclick="javascript:return false;"> 作用一样，但不同浏览器会有差异

     2. <a href="javascript:void(0)"></a>点击链接后不会回到网页顶部 ，而<a href="#"></a> 点击后会回到网面顶部

   • 总结：推荐使用 href="javascript:void(0)"

   • 扩展： <a href="javascript:hanshu();"这样点击a标签就可以执行hanshu()函数了

2. 特性

   • 每个接口都是需要加上请求的特性的 [HttpGet] / [HttpPost]

   • [Route("重命名")]，注意重命名的开头不能是/。

     请求时的url = /重命名就相当于 /Control/Action

     --------后台
             [Route("z")]//只是举例，一般不用这种名字
             [HttpPost]
             public string PostRouteTest([FromBody]string name)
             {
                 return "用Route实现Post带参请求" + name;
             }
     -------前台
      function PostRouteTest() {
             $.ajax({
                 url: "/z",
                 type:"post",
                 data: { "": "王旻" },
                 success: function (res) {
                     alert(res);
                 }
             })
         }

   • [RoutePrefix] 搭配[Route]

     [RoutePrefix("前缀名")] 只是自定义路由的前缀，定义在控制器上，而[Route("后缀")]是加在需要的动作方法上，前缀+后缀是新的清流链接，注意：同上，前后缀前不能有/

     -------后台
         [RoutePrefix("myapi/Teacher")]
         public class TeacherController : ApiController
         {
             [Route("GetTest")]
             public string GetTest()
             {
                 return "RoutePrefix测试";
             }
         }
     -------前台
     <a href="/myapi/Teacher/GetTest">Prefix测试</a>

   • [Route()] 实现约束

     可以实现对url参数的约束（如范围约束等等），具体可上网查询

      ----后台
             [Route("Constraint/{age:int=0}")]//约束age必须为int,否则访问不到
             [HttpGet]
             public string Constraint(int age)
             {
                 return "路由验证";
             }
     ------前台
     <a href='/myapi/Teacher/Constraint?age=24'>路由验证测试</a>

      

3. Post请求注意点

   • 参数前面必须加 [FromBody]

   • 如果只有一个参数，那么只能用空字符来传值给后台

      -------后台
            [HttpPost]
             public string PostWithOneParaTest([FromBody]string name)
             {
                 return "Post带一个参数测试" + name;
             }
     --------前台
         function postWithOneParaTest() {
             $.post("/myapi/Course/PostWithOneParaTest", { "": "王旻" }, function (res) { alert(res) });
         }

   • 如果有多个参数，那么需要把多个参数字段封装到一个对象中，然后对象作参数接收值使用

     --------后台
             [HttpPost]
             public string PostWithMoreParaTest([FromBody]Models.Person person)
             {
                 return "Post带多个参数测试" + person.Name + person.Age;
             }
     -------前台
         function postWithMoreParaTest() {
             $.post("/myapi/Course/PostWithMoreParaTest", { Name: "王旻", Age: 24 }, function (res) { alert(res) });
         }
     ​

      

4. Get请求注意点

   • Get请求参数可以映射进对象中，但需要在对象参数前加 [FromUri]

     -------后台
             [HttpGet]
             public string GetTestModel([FromUri]Models.Person person)
             {
                 string name1 = System.Web.HttpContext.Current.Request.QueryString["Name"];//取值方式一
                 string name2 = System.Web.HttpContext.Current.Request.Params["Name"];//取值方式二
                 return "Get测试对象" + person.Name;
             }
     --------前台
     <a href='/myapi/Course/GetTestModel?Name="王旻"'>Get测试Model</a>

   • 可以同时映射多个对象

     -------后台
             [HttpGet]
             public string GetTestMoreModel([FromUri]Models.Person person,[FromUri]Models.Score score)
             {
                 string name1 = System.Web.HttpContext.Current.Request.QueryString["Name"];
                 int count = Convert.ToInt32(System.Web.HttpContext.Current.Request.Params["Count"]);
                 return person.Name + score.Count;
             }
     -------前台
     <a href='/myapi/Course/GetTestMoreModel?Name="王旻"&Count=22'>Get测试多个Model</a>

   • 注意无法映射嵌套的参数对象

   • 在Get请求中，在省略[HttpGet]特性的情况下，可以根据方法名称中的关键字识别Get请求，注意这个Get关键字必须放在方法命名的开头才行

     ----后台
         public string GetPersonByJson(string personJson)
             {
                 Models.Person person = Newtonsoft.Json.JsonConvert.DeserializeObject<Models.Person>(personJson);//JSON字符串转对象
                 return person.Name + person.Age;
             }
     -----前台
         function getPersonByJson() {
             var jsonResult={Name:"王旻",Age:24};
             var info=JSON.stringify(jsonResult);
             $.get("/myapi/Course/GetPersonByJson", { personJson: info }, function (res) { alert(res) });
         }

      

5. 接收JSON字符串，并转化成实体对象

   -------后台
    [HttpGet]
           public string GetPersonByJson(string personJson)
           {
               Models.Person person = Newtonsoft.Json.JsonConvert.DeserializeObject<Models.Person>(personJson);//JSON字符串转对象
               return person.Name + person.Age;
           }
   ​
           [HttpPost]
           public string PostPersonByJson([FromBody]string personJson)
           {
               Models.Person person = Newtonsoft.Json.JsonConvert.DeserializeObject<Models.Person>(personJson);//JSON字符串转对象
               return person.Name + person.Age;
           }
   ​
   --------前台
       function getPersonByJson() {
           var jsonResult={Name:"王旻",Age:24};
           var info=JSON.stringify(jsonResult);
           $.get("/myapi/Course/GetPersonByJson", { personJson: info }, function (res) { alert(res) });
       }
   ​
       function postPersonByJson() {
           var jsonResult = { Name: "王旻", Age: 24 };
           var info = JSON.stringify(jsonResult);//JSON对象转JSON字符串
           $.post("/myapi/Course/PostPersonByJson", { "": info }, function (res) { alert(res) });
       }

6. 响应返回集合对象

   -------后台
         [HttpGet]
           public List<Models.Person> GetPersonList()
           {
               return new List<Models.Person>(){
                   new Models.Person(){Name="王旻",Age=24},
                   new Models.Person(){Name="李大",Age=22}
               };
           }
   ​
   -------前台
      function getPersonList() {
           $.get("/myapi/Course/GetPersonList", function (res) {
               alert(res);
               jQuery.each(res, function (i, item) {            
                   alert( i+1+ "次" + item.Name + item.Age);
               });
           });
       }

    

7. 基于dynamic实现多个参数请求

   • 扩展知识点

     1. contentType含义：在ajax请求中有可选参数contentType,设置的是请求参数的传输格式。

        Content-Type: application/x-www-form-urlencoded; charset=UTF-8,此为默认不设置的情况下

        它表示的含义是按照表单提交的方式传值，相当于一一映射进后台接收参数中（ key - 属性），如果用对象接收参数的话，必须明确对象的类型,

        请求中的 Request Payload 格式为 Name:王旻 Age:24

         

        Content-Type:application/json; charset=utf-8 此为设置contentType:'application/json'的情况下

        它表示的含义是将参数以JSON格式传到后台，因此后台用 dynamic类型将JSON转换成对象格式输出对应的属性值即可

        请求中的 Request Payload 格式为 {Name:"王旻"，Age:10}

        注意：

        • 如果用 JSON 格式，就要在 data 中用 JSON.stringify 将对象转为 Json字符串 传过去，后台可以通过对象或者dynamic类型来映射值，但是无法映射简单的参数了（string ,int）

        • 如果是一般Form格式，就不用转，但是后台的参数（无论是简单参数/还是对象）都需要与前台的传参数匹配

        • 如果是映射嵌套的对象，我们推荐使用 JSON 格式，Form格式传参不适合映射嵌套复杂的对象

        • 简单地说，前台传来JSON格式，后台服务器会转成JSON（Newtonsoft.Json.Linq.JObject类型）对象

          如果后台接收参数是实体对象，那么会根据key和属性一一映射

          如果用dynamic类型来接收，可以直接通过JSON对象输出

          也可以直接用JObject来接收，但是比较死板，还是建议用dynamic

     2. 使用dynamic搭配Json格式

        将传来的JSON格式数据转换成动态类型对象，只要此对象的属性和前台传的json的key一致即可，即使是嵌套的json数据也可以这样操作，可谓方便至极
        ​
        --------后台
        ​
               一般的JSON格式搭配dynamic
               [HttpPost]
                public string PostPersonByDynamic(dynamic para )
                {
                    string name = para.nameInfo;
                    int age = para.ageInfo;
                    return name+age;
                }
        ​
               嵌套复杂的JSON格式搭配dynamic
               [HttpPost]
                public string PostPersonByDynamic(dynamic para )
                {
                    string name = para.nameInfo;
                    int age = para.ageInfo.a;
                    return name+age;
                }
        ​
        -------前台
            function postPersonByDynamic() {
                $.ajax({
                    url: "/myapi/Course/PostPersonByDynamic",
                    type: "post",
                    data: JSON.stringify({nameInfo:"王旻",ageInfo:10}),
                    contentType:'application/json',
                    success: function (res) {
                        alert(res);
                    }
                })
            }
            
        ​
            function postPersonByDynamic() {
                $.ajax({
                    url: "/myapi/Course/PostPersonByDynamic",
                    type: "post",
                    data: JSON.stringify({ nameInfo: "王旻", ageInfo: {a:1,b:"w"}}),
                    contentType:'application/json',
                    success: function (res) {
                        alert(res);
                    }
                })
            }
        ​
        ​
        ​

         嵌套复杂的JSON格式搭配嵌套对象
         
         -------后台
                public class Sudent
               {
                public Person PersonInfo { get; set; }
        ​
                public Score ScoreInfo { get; set; }
               }
               
               [HttpPost]
                public string PostPersonByDynamic([FromBody]Models.Sudent para)
                {
                    string name = para.PersonInfo.Name;
                    int age = para.ScoreInfo.Count;
                    return name+age;
                }
        --------前台
        function postPersonByDynamic() {
                $.ajax({
                    url: "/myapi/Course/PostPersonByDynamic",
                    type: "post",
                    data: JSON.stringify({ PersonInfo: {Name:"王旻",Age:22}, ScoreInfo: {Count:22}}),
                    contentType:'application/json',
                    success: function (res) {
                        alert(res);
                    }
                })
            }
        ​

        ------后台
        嵌套复杂的JSON对象转实体对象类型
               [HttpPost]
                public string PostPersonByDynamic(dynamic para)
                {
                   //para是JSON对象（JObejct）
                    string name = para.PersonInfo.Name;
                    int age = para.ScoreInfo.Count;
        ​
                    var paraTostring = para.ToString();
                    var personInfoTostring=para.PersonInfo.ToString();//拿到嵌套对象的json字符串
                   //方式一 Json字符串转对象
                    Models.Sudent student = Newtonsoft.Json.JsonConvert.DeserializeObject<Models.Sudent>(para.ToString());
                   
                   //方式而 Json对象转实体对象
                    Newtonsoft.Json.Linq.JObject jCourse = para;
                    Models.Sudent student1 = jCourse.ToObject<Models.Sudent>();//将JObejct转换成具体的实体对象
                    var personInfo=para.PersonInfo;
                    
                    return name + age + student.PersonInfo.Name;
                }
        ​
        -----前台
           function postPersonByDynamic() {
                $.ajax({
                    url: "/myapi/Course/PostPersonByDynamic",
                    type: "post",
                    data: JSON.stringify({ PersonInfo: {Name:"王旻",Age:22}, ScoreInfo: {Count:22}}),
                    contentType:'application/json',
                    success: function (res) {
                        alert(res);
                    }
                })
            }

        -----后台
        用JObject实体对象接收JSON格式，如果只想转嵌套的实体对象，那是无法做到的，para.Person会报红线，除非用动态类型接收参数然后.属性来转，可参照上方方法
        [HttpPost]
                public string PostPersonByDynamic(Newtonsoft.Json.Linq.JObject para)
                {        
                    Models.Sudent student1 = para.ToObject<Models.Sudent>();//将JObejct转换成具体的实体对象                  
                    return student1.PersonInfo.Name;
                }
        -----前台
            function postPersonByDynamic() {
                $.ajax({
                    url: "/myapi/Course/PostPersonByDynamic",
                    type: "post",
                    data: JSON.stringify({ PersonInfo: {Name:"王旻",Age:22}, ScoreInfo: {Count:22}}),
                    contentType:'application/json',
                    success: function (res) {
                        alert(res);
                    }
                })
            }

8. 数组作参数接收前台请求的数组参数

   ------后台
         [HttpPost]
          public string ArrayPost(string[] array)
          {
              return array[0];
          }
   ------前台
      function array() {
           var arrayInfo = ["王旻", "小弟"];
           $.ajax({
               url: "/myapi/Course/ArrayPost",
               type:"post",
               contentType: "application/json",
               data: JSON.stringify(arrayInfo),
               success: function (res) {
                   alert(res);
               }
           })
       }

9. 集合作参数接收前台的JSON请求

   ------后台
   ​
           [HttpPost]
           public string ListPost(List<Models.Sudent> list)
           {
               return list[0].PersonInfo.Name + list[1].ScoreInfo.Count;
           }
   ​
   -----前台
       function listTest() {
           var list = [
               { PersonInfo: { Name: "王旻", Age: 25 }, ScoreInfo: { Count: 22 } },
           { PersonInfo: { Name: "流费", Age: 25 }, ScoreInfo: { Count: 27 } }
           ];
           $.ajax({
               type: "post",
               url: "/myapi/Course/ListPost",
               contentType: "application/json",
               data: JSON.stringify(list),
               success: function (res) {
                   alert(res);
               }
           })
       }