ajax 跨域webapi 最简单的demo(只介绍Get)
这几天遇到一个nodejs的项目,使用VSCode开发,需要连接数据库的,但是用nodejs连接数据库比较繁琐,需要安装很多东西,本人也懒得去研究了。后来想到建一个WebAPI然后用ajax来调用,避免使用nodejs直接和数据库打交道。
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
首先介绍webapi怎么搞
1.在ASP.net MVC Web 下选择WebAPI模板 建立项目
2.在项目根目录新建一个类(用来解决跨域的问题)
内容如下:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Http.Filters; namespace xxxService { public class CrossSiteAttribute : System.Web.Http.Filters.ActionFilterAttribute { private const string Origin = "Origin"; /// <summary> /// Access-Control-Allow-Origin是HTML5中定义的一种服务器端返回Response header,用来解决资源(比如字体)的跨域权限问题。 /// </summary> private const string AccessControlAllowOrigin = "Access-Control-Allow-Origin"; /// <summary> /// originHeaderdefault的值可以使 URL 或 *,如果是 URL 则只会允许来自该 URL 的请求,* 则允许任何域的请求 /// </summary> /// //private const string originHeaderdefault = "http://192.168.13.7:8002" ; private const string originHeaderdefault = "*"; /// <summary> /// 该方法允许api支持跨域调用 /// </summary> /// <param name="actionExecutedContext"> 初始化 System.Web.Http.Filters.HttpActionExecutedContext 类的新实例。</param> public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext) { actionExecutedContext.Response.Headers.Add(AccessControlAllowOrigin, originHeaderdefault); } } }
3.在controller下新建一个StringsController.cs 在调用api的时候得到的数据就是这边reurn的数据
内容如下:([CrossSite]不能少,用以解决跨域的问题)
using xxxService.Models; using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; namespace xxxService.Controllers { public class StringsController : ApiController { [CrossSite] public DataTable Get(string CultureName, string ProjectName) { object[] Params = new object[2]; Params[0] = ProjectName; Params[1] = CultureName; DbHelper DBH = new DbHelper(); DataTable result = DBH.ExecuteDataTable("usp_GetPluralStingByProjectAndLanguage", Params); return result; } } }
番外:
这边return的result 是DataTable类型的,在用ajax跨域调用的时候会不成功(在同一台机器上是成功的,但是部署到服务器上就会失败,确认是返回这个类型的原因),可能是解析错误的问题,所以返回的时候可以对datatable处理之后再返回,例如:
DataTable tables = DBH.ExecuteDataTable("usp_GetPluralStingByProjectAndLanguage", Params); foreach (DataRow row in tables.Rows) { result.CultureName = row[0].ToString(); result.Translation = row[1].ToString(); result.SourceString = row[2].ToString(); result.ResourceID = row[3].ToString(); result.ProjectName = row[4].ToString(); results.Add(result); }
这是后来补充的,和本篇文章关联不大
4.为了给一个简单的效果图,我新建了一个NamesController.cs,和上面的其实一样
内容如下:
using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; using xxxService.Models; namespace xxxService.Controllers { public class NamesController : ApiController { [CrossSite] public string Get() { return "zhangsan"; } } }
访问该api: http://localhost:59579/api/names/get
就此api的编写完成(都是最简单的例子)
5.ajax调用,在另一个项目中引入jquery
添加如下代码:
$.ajax({ type: 'GET', url: 'http://localhost:59579/api/strings/get', dataType: 'JSON', data:{ CultureName:cultureName, ProjectName:projectName }, success: function (data) { DrawTable(data); layer.closeAll('loading'); } });
如有不清楚参照:https://www.cnblogs.com/Leo_wl/p/4780650.html 这个写的比较好