1 大概思路

l 创建WebAPI

l 创建CrossMainController并编写

l Nuget安装microsoft.aspnet.webapi.cors

l 跨域设置路由

l 编写Jquery EasyUI界面

l 运行效果

2 创建WebAPI

创建WebAPI，新建->项目->ASP.NET Web应用程序->Web API

3 创建CrossMainController并编写

编写如下：

using CrossdomainWebApi.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

namespace CrossdomainWebApi.Controllers

{

    [RoutePrefix("api/CrossMain")]

    public class CrossMainController : ApiController

    {

        [Route("GetUserInfo")]

        [HttpPost]

        public HttpResponseMessage GetUserInfo([FromBody]formUserInfo obj)

        {

            //[FromBody]int page, [FromBody]int rows, [FromBody]string email

            List<UserInfoViewModel> listStudent = new List<UserInfoViewModel>();

            for (int i = ; i < ; i++)

            {

                UserInfoViewModel student = new Models.UserInfoViewModel();

                Random ran = new Random();

                student.Email = i.ToString() + ran.Next(, ).ToString() + "System@qq.com";

                student.HasRegistered = true;

                student.LoginProvider = "Yes";

                listStudent.Add(student);

            }

            int page = obj.page;

            int rows = obj.rows;

            List<UserInfoViewModel> ts = new List<UserInfoViewModel>();

            for (int i = (page - ) * rows; i < (page * rows>listStudent.Count? listStudent.Count:page * rows) ; i++)

            {

                ts.Add(listStudent[i]);

            }

            string json= Newtonsoft.Json.JsonConvert.SerializeObject(new { rows = ts, total = listStudent.Count, success = true });

            return new HttpResponseMessage { Content = new StringContent(json, System.Text.Encoding.UTF8, "text/plain") };

        }

    }

    /// <summary>

    /// form提交数据

    /// </summary>

    public class formUserInfo

    {

        public int page { get; set; }

        public int rows { get; set; }

        public string email { get; set; }

    }

}

启动运行：http://localhost:26735/help

4 Nuget安装microsoft.aspnet.webapi.cors

5 跨域设置路由

设置项目 crossdomainwebapi\crossdomainwebapi\app_start\webapiconfig.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net.Http;

using System.Web.Http;

using Microsoft.Owin.Security.OAuth;

using Newtonsoft.Json.Serialization;

//跨域引用

using System.Web.Http.Cors;

namespace CrossdomainWebApi

{

    public static class WebApiConfig

    {

        public static void Register(HttpConfiguration config)

        {

            // Web API configuration and services

            // Configure Web API to use only bearer token authentication.

            //config.SuppressDefaultHostAuthentication();

            //config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));

            //跨域配置

            config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

            // Web API routes

            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(

                name: "DefaultApi",

                routeTemplate: "api/{controller}/{id}",

                defaults: new { id = RouteParameter.Optional }

            );

        }

    }

}

6 编写Jquery EasyUI界面

前台界面代码如下：

<!DOCTYPE HTML>

<html>

<head>

    <title>Ems SA</title>

    <link rel="stylesheet" type="text/css" href="JqueryEasyui/themes/bootstrap/easyui.css" />

    <link rel="stylesheet" type="text/css" href="JqueryEasyui/themes/icon.css" />

    <link rel="stylesheet" type="text/css" href="JqueryEasyui/demo/demo.css" />

    <script type="text/javascript" src="JqueryEasyui/jquery.min.js"></script>

    <script type="text/javascript" src="JqueryEasyui/jquery.easyui.min.js"></script>

    <script type="text/javascript">

        function doSearch() {

        }

    </script>

</head>

<body>

    <div>

        <table id="dg" class="easyui-datagrid" style="width: 100%; height: auto; min-height: 400px"

               data-options="

                iconCls: 'icon-edit',

                singleSelect: true,

                url: 'http://localhost:26735/Api/CrossMain/GetUserInfo',

                method: 'post',

                pagination:true,

                pageSize:15,

                pageList: [5, 10, 15],

                queryParams: {'email': ‘’}

        ">

        <thead>

            <tr>

                <th data-options="field:'ck',checkbox:true">

                </th>

                <th data-options="field:'Email',width:'20%'">

                    Email

                </th>

                <th data-options="field:'HasRegistered'">

                    HasRegistered

                </th>

                <th data-options="field:'HasRegistered'">

                    HasRegistered

                </th>

            </tr>

        </thead>

        </table>

    </div>

</body>

</html>

7 运行效果

启动WebAPI，并刷新Jquery EasyUI界面，可见如下图：

8 总结

WebAPI提供广泛的对外开放，可以起到整合性的作用，例如：跟Oracle ERP、SAP的SCM、MM、PP以及SD领域。WebAPI形成一个Web标准，对于一些微服务，也起到关键性的作用。跨域还能不受限制让更多人访问，当然，也降低了安全性。

源代码下载：

http://download.csdn.net/download/ruby_matlab/10117635

PDF下载：

跨域WebApi的Jquery EasyUI的数据交互pdf

跨域WebApi的Jquery EasyUI的数据交互的更多相关文章

浅析Ajax跨域原理及JQuery中的实现分析
AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请求数据,就会出现错误.如果能控制数据驻留的远程服务器 ...
Ajax跨域原理及JQuery中的实现
浅析Ajax跨域原理及JQuery中的实现分析 AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请 ...
扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
ASP.NET 跨域请求之jQuery的ajax jsonp的使用解惑（转载）
前天在项目中写的一个ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法,直接执行了error方法提示错误——ajax jsonp之前并没有用过,对其的理解为跟普 ...
ajax 跨域webapi 最简单的demo（只介绍Get）
这几天遇到一个nodejs的项目,使用VSCode开发,需要连接数据库的,但是用nodejs连接数据库比较繁琐,需要安装很多东西,本人也懒得去研究了.后来想到建一个WebAPI然后用ajax来调用,避 ...
JSONP跨域原理和jQuery.getJSON用法
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式).本文主要介绍JS ...
跨域问题及jQuery中Ajax传参的讲解
1.跨域:不再同一服务器下,就是协议,域名,端口,有一个不一样: 浏览器对于javascript的同源策略的限制: 案例: 以 http://172.164.23:8088/ 为例相同域名:172. ...
套用JQuery EasyUI列表显示数据、分页、查询
声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近 ...

随机推荐

【Java入门提高篇】Day9 Java内部类——静态内部类
今天来说说Java中的最后一种内部类--静态内部类所谓的静态内部类,自然就是用static修饰的内部类,那用static修饰过后的内部类,跟一般的内部类相比有什么特别的地方呢? 首先,它是静态的,这 ...
关于sqlmap使用手册
sqlmap 使用手册官方wiki Github sqlmap也是渗透中常用的一个注入工具,可以用来检测sql注入漏洞. 功能与作用完全支持MySQL,Oracle,PostgreSQL,Micr ...
Python爬虫(十二)_XPath与lxml类库
Python学习指南有同学说,我正则用的不好,处理HTML文档很累,有没有其他的方法? 有!那就是XPath,我们可以用先将HTML文档转换成XML文档,然后用XPath查找HTML节点或元素. 什 ...
出现JSONvalue failed .error is Illegal start of token
出现JSONvalue failed .error is Illegal start of token了? 别着急,抽根烟,喝杯水.开工: 1:判断是请求前报的错还是请求后报的错!!这个很重要,我就是 ...
《Qt on Android核心编程》介绍
<Qt on Android核心编程>最终尘埃落定.付梓印刷了. 2014-11-02更新:china-pub的预售链接出来了.折扣非常低哦. 封面看看封面的效果吧,历经几版,最终就成了 ...
Caffe-5.2-（GPU完整流程）训练（依据googlenet微调）
上一篇使用caffenet的模型微调.但由于caffenet有220M太大,測试速度太慢.因此换为googlenet. 1. 训练迭代了2800次时死机,大概20分钟. 使用的是2000次的模型. ...
Android中相机和相冊使用分析
Android中相机和相冊使用分析欢迎转载,但请尊重原创(文章来自不易,转载请标明转载出处,谢谢) 在手机应用程序中,使用自带的相机拍照以及相冊选择喜欢的图片是最常见只是的用户需求,那么怎么合理使用 ...
python 创建列表和向列表添加元素方法
今天的学习内容是python中的列表的相关内容. 一.创建列表 1.创建一个普通列表 >>> tabulation1 = ['大圣','天蓬','卷帘'] >>> ...
JAVA入门[21]-Jedis操作redis示例
本节目标通过JedisPool获取Jedis示例,并完成对redis 简单的Key-value读写操作. 完整代码结构如下: redis服务端在本地运行redis-server.exe,然后在re ...
Windows 10 安装 Docker for Windows
Docker for Windows是Docker社区版(CE)应用程序. Docker for Windows安装包包括在Windows系统上运行Docker所需的一切. 本主题介绍了预安装注意事项 ...

跨域WebApi的Jquery EasyUI的数据交互