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 这个写的比较好