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

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

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

 一、创建WebAPI项目

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

二、传递参数遇到的问题

后台实体类（Person）：

 namespace WebApi.Models

 {

     public class Person

     {

         public int ID { get; set; }

         public string Name { get; set; }

         public string EnglishName { get; set; }

     }

 }

　　后台接口：

     public class TestController : ApiController

     {

         public Person GetEnglishName(int ID, string Name)

         {

             Person man = new Person();

             man.ID = ID;

             man.Name = Name;

             man.EnglishName = "Bert";

             return man;

         }

     }

　　前端Ajax请求：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <meta charset="utf-8" />

 </head>

 <body>

     <input  type="submit" id="testId"/>

     <input  type="text" id="text1"/>

 </body>

 </html>

 <script src="Scripts/jquery-1.10.2.min.js"></script>

 <script type="text/javascript">

     $("#testId").click(function () {

         $.ajax({

             url: "/api/Test/GetEnglishName",

             type: "GET",

             data: { "ID": 1, "Name": "yzc" },

             success: function (data) {

                 $("#text1").val(data.EnglishName);

             }

         });

     });

 </script>

　　结果：

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

①代码修改如下：

     public class TestController : ApiController

     {

         public Person SetEnglishName(int ID, string Name)

         {

             Person man = new Person();

             man.ID = ID;

             man.Name = Name;

             man.EnglishName = "Bert";

             return man;

         }

     }
 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <meta charset="utf-8" />

 </head>

 <body>

     <input  type="submit" id="testId"/>

     <input  type="text" id="text1"/>

 </body>

 </html>

 <script src="Scripts/jquery-1.10.2.min.js"></script>

 <script type="text/javascript">

     $("#testId").click(function () {

         $.ajax({

             url: "/api/Test/SetEnglishName",

             type: "GET",

             data: { "ID": 1, "Name": "yzc" },

             success: function (data) {

                 $("#text1").val(data.EnglishName);

             }

         });

     });

 </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"一起后台才能拿到数据。

　前端请求：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <meta charset="utf-8" />

 </head>

 <body>

     <input  type="submit" id="testId"/>

     <input  type="text" id="text1"/>

 </body>

 </html>

 <script src="Scripts/jquery-1.10.2.min.js"></script>

 <script type="text/javascript">

     $("#testId").click(function () {

         $.ajax({

             url: "/api/Test/GetEnglishName",

             type: "POST",

             contentType: "application/json",

             data:JSON.stringify({ "ID": 1, "Name": "yzc"}),

             success: function (data) {

                 $("#text1").val(data.EnglishName);

             }

         });

     });

 </script>

　后台接口：

     public class TestController : ApiController

     {

         [HttpPost]

         public Person GetEnglishName(dynamic per)

         {

             Person man = new Person();

             man.ID = per.ID;

             man.Name = per.Name;

             man.EnglishName = "Bert";

             return man;

         }

     }

　结果：

三、总结：

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

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

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

    想写个同类型的,代码未测. 什么是WebAPI?我的理解是WebAPI+JQuery(前端)基本上能完成Web MVC的功能,即:这么理解吧,WebAPI相当于Web MVC的后台部分. 接下来直接上 ...

  2. ajax请求在参数中添加时间戳

    ajax请求在参数中添加时间戳 参考网址

  3. 资料汇总--Ajax中Put和Delete请求传递参数无效的解决方法（Restful风格）【转】

    开发环境:Tomcat9.0 在使用Ajax实现Restful的时候,有时候会出现无法Put.Delete请求参数无法传递到程序中的尴尬情况,此时我们可以有两种解决方案:1.使用地址重写的方法传递参数 ...

  4. Ajax中Put和Delete请求传递参数无效的解决方法（Restful风格）

    本文装载自:http://blog.csdn.net/u012737182/article/details/52831008    感谢原文作者分享 开发环境:Tomcat9.0 在使用Ajax实现R ...

  5. Ajax请求传递数组参数的方法

    方法一:拼接字符串参数 var arr={params:['param','param2']}; $.ajax({url:请求地址, data:arr, type:"POST", ...

  6. springmvc框架下ajax请求传参数中文乱码解决

    springmvc框架下jsp界面通过ajax请求后台数据,传递中文参数到后台显示乱码 解决方法:js代码 运用encodeURI处理两次 /* *掩码处理 */ function maskWord( ...

  7. 复用$.ajax方式传递参数错误处理

    1.封装后的方法,在 data:inData 传递参数的方式和一般不一样,如果不注意会出现错误. function getDataByJsonP(methName, inData, fn) { $.a ...

  8. Ajax请求的参数

    post请求和get请求存放参数位置 post请求和get请求存放参数位置是不同的: post方式参数存放在请求数据包的消息体中. get方式参数存放在请求数据包的请求行的URI字段中,以?开始以pa ...

  9. python学习(26)分析ajax请求抓取今日头条cosplay小姐姐图片

    分析ajax请求格式,模拟发送http请求,从而获取网页代码,进而分析取出需要的数据和图片.这里分析ajax请求,获取cosplay美女图片. 登陆今日头条,点击搜索,输入cosplay 下面查看浏览 ...

随机推荐

  1. [原]MS SQL表字段自增相关的脚本

    --查询表是否有自增字段 SELECT OBJECTPROPERTY(OBJECT_ID('[表名]'), 'TableHasIdentity') --查询表的自增字段 SELECT COLUMN_N ...

  2. android:scaleType=&quot;matrix&quot;布局文件载入图片时候的显示方式

    android:scaleType="center" 以原图的几何中心点和ImagView的几何中心点为基准,按图片的原来size居中显示,不缩放,当图片长/宽超过View的长/宽 ...

  3. DB2检测表字段改动的方法（不用触发器）

    ALTER TABLE TEST ADD COLUMN RTS TIMESTAMP NOT NULL GENERATED ALWAYS FOR EACH ROW ON UPDATE AS ROW CH ...

  4. 线程相关函数(3)-pthread_detach()将某个线程设成分离态

    #include <pthread.h>int pthread_detach(pthread_t tid); pthread_t tid: 分离线程的tid返回值:成功返回0,失败返回错误 ...

  5. SQL业务审核与优化

    审核   什么是业务审核 类似与code review 评审业务Schema和SQL设计 偏重关注性能 是业务优化的主要入口之一           审核提前发现问题,进行优化           上 ...

  6. [ADC]Linux ADC驱动

    ADC TI adc user guide: http://processors.wiki.ti.com/index.php/Linux_Core_ADC_Users_Guide 问题: 在tools ...

  7. oozie开发注意事项

    ooziejob执行后 1. job.properties.coordinatior.xml中设置的值都是不可变的,除非将job kill掉,然后重新调度. oozie job -kill 00000 ...

  8. MS SQL Server2012中的EOMONTH函数

    MS SQL Server2012中的EOMONTH函数   这个函数是获取一个指定日期所在月份最后一天的日期.可以得到某一个月月份的最后一天 如: declare @orderdate date=' ...

  9. 打印-print.js

    //打印开始// strPrintName 打印任务名// printDatagrid 要打印的datagridfunction CreateFormPage(ctx,strPrintName, pr ...

  10. Spring Boot简化了基于Spring的应用开发

    Spring Boot简化了基于Spring的应用开发,通过少量的代码就能创建一个独立的.产品级别的Spring应用. Spring Boot为Spring平台及第三方库提供开箱即用的设置,这样你就可 ...