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

随机推荐

【JSOI2008】最大数
https://www.luogu.org/problem/show?pid=1198 之前刚学完Splay想找题练手的时候做的,写完Splay交上去了才发现这应该是线段树裸题23333 Splay解 ...
dock使用方法
Docker 是一个开源项目,为开发者和系统管理员提供了一个开放的平台,在任何地方通过打包和运行应用程序作为一个轻量级的容器.Docker 在软件容器内自动部署应用程序.Docker 最开始由 Sol ...
LDA数学八卦笔记（一）Gamma函数
Technorati Tags: LDA主题模型
kafka消息传输时的对象转字符串时所需 -json String 转list 、set、 Long、 String 、map 与json Iterator遍历
JSONObject jsonObject = new JSONObject(jsonString); Iterator iterator = jsonObject.keys(); while(ite ...
怎样使用Android Studio开发Gradle插件
缘由首先说明一下为什么会有这篇文章.前段时间,插件化以及热修复的技术非常热,Nuwa热修复的工具NuwaGradle,携程动态载入技术DynamicAPK,还有希望做最轻巧的插件化框架的Small. ...
【Access2007】解救被阉割的truncate
Access2007使用被阉割的J-SQL语句,语法跟T-SQL语句.也就是寻常最标准的SQL语句一模一样,但就是仅保留insert into,delete,select,update与没太大意义的过 ...
Python的招牌菜xmlrpc
一.简单介绍为了解决在系统的80port提供RPC的服务.而又不影响正在运行的WEB服务.人们想出了用HTTP协议传输RPC包的办法.对于差点儿是专门用于传输文本的HTTP协议.要在其上传输RPC封 ...
Maven构建真正的J2EE项目
今天同事问起我眼下用Maven构建的多模块项目架构和曾经用Eclipse创建的Web项目的问题.以下将讲一下使用maven搭建多模块的J2ee项目,以及採用这样的方式搭建项目对日后项目的水平拆分和垂直 ...
zookeeper web ui-->node-zk-browser安装
眼下公司正在使用zookeeper做配置管理和其它工作,在网上找几个zookeeper管理工具,都不尽人意,要么功能不够强大,要么不能友好的浏览zk树形结构.我的想法是zk管理工具,应该有一个树形结构 ...
git 操作问题
clone远程版本号库的时候,报错,提示路径不正确. 之前输入的路径为:ssh://[ip]:[port号]/[数据库名称] 增加username后的路径:ssh://[username]@[ip]: ...

跨域WebApi的Jquery EasyUI的数据交互