WebApi接口 - 如何在应用中调用webapi接口

网友投稿 305 2022-10-25


WebApi接口 - 如何在应用中调用webapi接口

简单做个webapi(查询+添加)接口

首先,我们需要有一个webapi接口项目,我这里以前面WebApi接口 - 响应输出xml和json文章的项目来构建本篇文章的测试用例;这里新建一个 DbData 数据源类,主要用来做数据存储和提供查询列表数据及添加数据方法,具体代码如:

1 public class DbData 2     { 3         public static DbData Current 4         { 5             get 6             { 7                 var key = "dbKey"; 8                 var db = CallContext.GetData(key) as DbData; 9                 if (db == null)10                 {11                     db = new DbData();12                     CallContext.SetData(key, db);13                 }14                 return db;15             }16         }17 18 19         private static List students = new List(){  20             new MoStudent{ Id =1 , Name ="小1", Sex = true, Birthday= Convert.ToDateTime("1991-05-31")},21                      new MoStudent{ Id =2 , Name ="小2", Sex = false, Birthday= Convert.ToDateTime("1991-05-31")},22                      new MoStudent{ Id =3 , Name ="小3", Sex = false, Birthday= Convert.ToDateTime("1991-05-31")},23                      new MoStudent{ Id =4 , Name ="小4", Sex = true, Birthday= Convert.ToDateTime("1991-05-31")}24         };25 26         public List GetAll()27         {28             return students;29         }30 31         public bool Save(MoStudent moStudent)32         {33             moStudent.Id = students.Max(b => b.Id) + 1;34             students.Add(moStudent);35             return true;36         }37     }

好了,我们再 ValuesController 中分别创建个获取学生列表信息的方法 GetAllStudents01_2 和添加学生信息的方法 AddStudent ,然后填写内部代码如:

1 private DbData db = DbData.Current; 2  3         [Route("all01_2")] 4         [AcceptVerbs("POST","GET")] 5         public HttpResponseMessage GetAllStudents01_2() 6         { 7             var students = db.GetAll(); 8             return Request.CreateResponse(HttpStatusCode.OK, students); 9         }10 11         [Route("add")]12         [HttpPost]13         public HttpResponseMessage AddStudent(MoStudent moStudent)14         {15             var - 路由,然后再 HomeController.cs 文件中增加Index(学生列表)和Add(添加学生信息)两个Action方法,并且填写代码如:

1 public class HomeController : Controller 2     { 3  4         public async Task Index() 5         { 6  7             var searchData = new MoStudent(); 8             //查询条件 9 10             var webapiUrl = "Index() 这样的代码;好了废话太多了,咋们一起来看下试图view中绑定代码和绑定学生列表后的查询结果:

执行方法这个学生列表Action的Index方法后,在浏览器的效果如:

看到结果后,咋们的mvc调用webapi的例子就成功了,下面来看下添加功能,添加方法里面的主要调用webapi代码和查询学生列表方法的代码几乎一样,只是这里调用api方法后返回的结果是单个学生对象信息不是集合了,这里只贴一下Add视图代码供大家参考:

值得注意的是这种后台请求不同域之间的api接口,不会有跨域的限制,除非接口本身有限制外,下面要讲解的ajax方式就不相同了;

ajax如何调api接口

首先,咋们需要明确一个东西,ajax调用接口不能跨域,这个是必须了解的,比如手机h5的webapp通常都是使用ajax来调用接口获取数据的,而且大部分需求都是跨域来请求的,因此本示例会在下面讲解的时候简单提及到常用的几种处理方式,并且使用其中一种来讲解,希望能给大家带来帮助;为了测试跨域访问情况,我们在上一节点的试图中增加如下布局代码:

然后,jquery绑定查询按钮事件代码如:

 2  3     $(function () { 4  5         $("#btnSearch").on("click", function () { 6  7             var tabObj = $("#tab tbody"); 8             tabObj.html('tr>加载中...'); 9 10             $.post("使用jsonp格式来处理

2. 在接口端写入接受跨域请求的设置

很显然咋们本次测试用的是第二种,方便,快速就能完成,不过这里因为是webapi,所以这里直接使用微软提供的Cors的服务,我们需要使用nuget控制台录入如下指定:  Install-Package Microsoft.AspNet.WebApi.Cors -Version 5.0.0  ,目前最后更新的版本是:

能正常获取出来webapi接口数据了,好了咋们再来简单看下在Controller中 EnableCors 允许传递的参数说明:

由上的参数说明我们可以这样设置,来确保任何请求地址都能访问到我们webapi接口:

EnableCors的第一个参数如果是*,表示任何请求地址来源都运行访问该webapi;第二个参数如果是*,表示任意头部head信息都可以;第三参数为*,表示任意请求方式(如:Post,put,delete等);总结下ajax方式请求不同域名接口,需要跨域运行设置,这个也是很多互联网公司webapp应用很常见的一种方式;

只要跨域请求成功后,添加学生信息就好做了,下面直接贴出通过ajax调用添加学生信息接口代码:

 2  3     $(function () { 4  5         $("#btnAjaxSave").on("click", function () { 6  7             var divResult = $("#divResult"); 8             divResult.html("保存中,请稍后..."); 9 10             var param = {11                 Name: $("input[name='Name']").val(),12                 Sex: $("input[name='Sex']").is(":checked"),13                 Birthday: $("input[name='Birthday']").val()14             };15 16             $.post("http://localhost:1001/s/add", param, function (data) {17                 console.log(data);18                 if (data) {19                     divResult.html(data.Id > 0 ? "添加成功" : "添加失败");20                 } else {21                     divResult.html("");22                 }23             });24         });25     })26 27 

对应的学生信息添加接口:

1 [Route("add")] 2         [HttpPost] 3         public HttpResponseMessage AddStudent(MoStudent moStudent) 4         { 5             var httpStatus = HttpStatusCode.OK; 6             if (ModelState.IsValid) 7             { 8                 var isfalse = db.Save(moStudent); 9             }10             return Request.CreateResponse(httpStatus, moStudent);11         }


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:华为ACL配置
下一篇:Java设计模式之桥梁(Bridge)模式
相关文章

 发表评论

评论列表