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那么肥大,真想把自己的项目改了,最近 ...

随机推荐

snprintf 返回值陷阱重新封装
snprintf()函数用于将格式化的数据写入字符串,其原型为: int snprintf(char *str, int n, char * format [, argument, ...]); st ...
【NOI2015】程序自动分析
https://www.luogu.org/problem/show?pid=1955 并查集+离散化. 先执行所有x=y问题,即合并x和y. 再依次执行所有x!=y问题,即查询x和y是否处于同一集合 ...
Jarvis OJ - [XMAN]level0 - Writeup
差不多最简单的pwn了吧,不过本菜鸟还是要发出来镇楼分析一下,checksec 查看程序的各种保护机制没有金丝雀,没有pie 执行时输出Hello,World,在进行输入,溢出嘛开工丢到id ...
java内存模型个人理解总结
现阶段线程之间的通讯主要有两种:内存共享和消息传递,而且在java中是采用的内存共享.简单说下内存共享: 假设现在有a线程和b线程,在a和b线程之间的通讯是依靠a线程将相关数据刷新到共享内存,然后b线 ...
java集合框架07——Map架构与源代码分析
前几节我们对Collection以及Collection中的List部分进行了分析,Collection中还有个Set,因为Set是基于Map实现的,所以这里我们先分析Map,后面章节再继续学习Set ...
vim配置分享(持续更新中)
作者:zhanhailiang 日期:2014-10-24 set nocompatible set nu "" 自己主动缩进 syntax on set autoindent ...
C#基础知识结构与类的区别
网上看到struct与class之间的区别,都写的很多,当然说的是对的,也很详细.不过我个人不喜欢照本宣科,还是要有自己的理解和认识,方便记忆. (前提:对于值类型与引用类型有一定的认识) 结构最重要 ...
如何处理使用js兼容所有浏览器的问题
首先:如何处理兼容问题 1.如果两个都是属性,用逻辑||做兼容 2.如果有一个是方法,用三元做兼容 3.如果是多个属性或方法,封装函数做兼容分享两个小知识点: 1.取消拖拽的默认行为: docume ...
arm-linux-androideabi-4.8/prebuilt/darwin-x86_64/bin/arm-linux-androideabi-g++: Command not found 解决方法
执行下列命令时: ndk-build -j16 出现如下错误: Android NDK: WARNING: Ignoring unknown import directory: jni/../../. ...
10个最有用的 IntelliJ IDEA 插件
IntelliJ IDEA鼓舞了许多Java开发人员编写插件,从J2EE到代码编辑工具再到游戏.现在,它拥有了一个强大的插件生态系统,超过1500可用的插件以及几乎每周都有新的插件出现.在这篇文章中, ...

跨域WebApi的Jquery EasyUI的数据交互