目录

1       大概思路... 1

2       创建WebAPI 1

3       创建CrossMainController并编写... 1

4       Nuget安装microsoft.aspnet.webapi.cors. 4

5       跨域设置路由... 4

6       编写Jquery EasyUI界面... 5

7       运行效果... 7

8       总结... 7

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并编写

编写如下：

  1. using CrossdomainWebApi.Models;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Linq;
  5. using System.Net;
  6. using System.Net.Http;
  7. using System.Web.Http;
  8.  
  9. namespace CrossdomainWebApi.Controllers
  10. {
  11.     [RoutePrefix("api/CrossMain")]
  12.     public class CrossMainController : ApiController
  13.     {
  14.         [Route("GetUserInfo")]
  15.         [HttpPost]
  16.         public HttpResponseMessage GetUserInfo([FromBody]formUserInfo obj)
  17.         {
  18.             //[FromBody]int page, [FromBody]int rows, [FromBody]string email
  19.             List<UserInfoViewModel> listStudent = new List<UserInfoViewModel>();
  20.             for (int i = ; i < ; i++)
  21.             {
  22.                 UserInfoViewModel student = new Models.UserInfoViewModel();
  23.                 Random ran = new Random();
  24.                 student.Email = i.ToString() + ran.Next(, ).ToString() + "System@qq.com";
  25.                 student.HasRegistered = true;
  26.                 student.LoginProvider = "Yes";
  27.                 listStudent.Add(student);
  28.             }
  29.  
  30.             int page = obj.page;
  31.             int rows = obj.rows;
  32.             List<UserInfoViewModel> ts = new List<UserInfoViewModel>();
  33.             for (int i = (page - ) * rows; i < (page * rows>listStudent.Count? listStudent.Count:page * rows) ; i++)
  34.             {
  35.                 ts.Add(listStudent[i]);
  36.             }
  37.  
  38.             string json= Newtonsoft.Json.JsonConvert.SerializeObject(new { rows = ts, total = listStudent.Count, success = true });
  39.             return new HttpResponseMessage { Content = new StringContent(json, System.Text.Encoding.UTF8, "text/plain") };
  40.         }
  41.     }
  42.  
  43.     /// <summary>
  44.     /// form提交数据
  45.     /// </summary>
  46.     public class formUserInfo
  47.     {
  48.         public int page { get; set; }
  49.         public int rows { get; set; }
  50.         public string email { get; set; }
  51.     }
  52. }

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

4       Nuget安装microsoft.aspnet.webapi.cors

5       跨域设置路由

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

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Net.Http;
  5. using System.Web.Http;
  6. using Microsoft.Owin.Security.OAuth;
  7. using Newtonsoft.Json.Serialization;
  8. //跨域引用
  9. using System.Web.Http.Cors;
  10.  
  11. namespace CrossdomainWebApi
  12. {
  13.     public static class WebApiConfig
  14.     {
  15.         public static void Register(HttpConfiguration config)
  16.         {
  17.             // Web API configuration and services
  18.             // Configure Web API to use only bearer token authentication.
  19.             //config.SuppressDefaultHostAuthentication();
  20.             //config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));
  21.  
  22.             //跨域配置
  23.             config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
  24.             // Web API routes
  25.             config.MapHttpAttributeRoutes();
  26.  
  27.             config.Routes.MapHttpRoute(
  28.                 name: "DefaultApi",
  29.                 routeTemplate: "api/{controller}/{id}",
  30.                 defaults: new { id = RouteParameter.Optional }
  31.             );
  32.         }
  33.     }
  34. }

6       编写Jquery EasyUI界面

前台界面代码如下：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <title>Ems SA</title>
  5.     <link rel="stylesheet" type="text/css" href="JqueryEasyui/themes/bootstrap/easyui.css" />
  6.     <link rel="stylesheet" type="text/css" href="JqueryEasyui/themes/icon.css" />
  7.     <link rel="stylesheet" type="text/css" href="JqueryEasyui/demo/demo.css" />
  8.     <script type="text/javascript" src="JqueryEasyui/jquery.min.js"></script>
  9.     <script type="text/javascript" src="JqueryEasyui/jquery.easyui.min.js"></script>
  10.     <script type="text/javascript">
  11.         function doSearch() {
  12.  
  13.         }
  14.     </script>
  15. </head>
  16. <body>
  17.     <div>
  18.         <table id="dg" class="easyui-datagrid" style="width: 100%; height: auto; min-height: 400px"
  19.                data-options="
  20.                 iconCls: 'icon-edit',
  21.                 singleSelect: true,
  22.                 url: 'http://localhost:26735/Api/CrossMain/GetUserInfo',
  23.                 method: 'post',
  24.                 pagination:true,
  25.                 pageSize:15,
  26.                 pageList: [5, 10, 15],
  27.                 queryParams: {'email': ‘’}
  28.         ">
  29.         <thead>
  30.             <tr>
  31.                 <th data-options="field:'ck',checkbox:true">
  32.                 </th>
  33.                 <th data-options="field:'Email',width:'20%'">
  34.                     Email
  35.                 </th>
  36.                 <th data-options="field:'HasRegistered'">
  37.                     HasRegistered
  38.                 </th>
  39.                 <th data-options="field:'HasRegistered'">
  40.                     HasRegistered
  41.                 </th>
  42.             </tr>
  43.         </thead>
  44.         </table>
  45.     </div>
  46. </body>
  47. </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的数据交互的更多相关文章

  1. 浅析Ajax跨域原理及JQuery中的实现分析

    AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请求数据,就会出现错误.如果能控制数据驻留的远程服务器 ...

  2. Ajax跨域原理及JQuery中的实现

    浅析Ajax跨域原理及JQuery中的实现分析   AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请 ...

  3. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  4. 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  5. ASP.NET 跨域请求之jQuery的ajax jsonp的使用解惑 （转载）

    前天在项目中写的一个ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法,直接执行了error方法提示错误——ajax jsonp之前并没有用过,对其的理解为跟普 ...

  6. ajax 跨域webapi 最简单的demo（只介绍Get）

    这几天遇到一个nodejs的项目,使用VSCode开发,需要连接数据库的,但是用nodejs连接数据库比较繁琐,需要安装很多东西,本人也懒得去研究了.后来想到建一个WebAPI然后用ajax来调用,避 ...

  7. JSONP跨域原理和jQuery.getJSON用法

    JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式).本文主要介绍JS ...

  8. 跨域问题及jQuery中Ajax传参的讲解

    1.跨域:不再同一服务器下,就是协议,域名,端口,有一个不一样: 浏览器对于javascript的同源策略的限制: 案例: 以 http://172.164.23:8088/ 为例 相同域名:172. ...

  9. 套用JQuery EasyUI列表显示数据、分页、查询

    声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近 ...

随机推荐

  1. 大数据学习系列之二 ----- HBase环境搭建(单机)

    引言 在上一篇中搭建了Hadoop的单机环境,这一篇则搭建HBase的单机环境 环境准备 1,服务器选择 阿里云服务器:入门型(按量付费) 操作系统:linux CentOS 6.8 Cpu:1核 内 ...

  2. webrc视频数据发送处理流程详解

  3. JAVA基础再回首（二十五）——Lock锁的使用、死锁问题、多线程生产者和消费者、线程池、匿名内部类使用多线程、定时器、面试题

    JAVA基础再回首(二十五)--Lock锁的使用.死锁问题.多线程生产者和消费者.线程池.匿名内部类使用多线程.定时器.面试题 版权声明:转载必须注明本文转自程序猿杜鹏程的博客:http://blog ...

  4. 赵雅智：service与訪问者之间进行通信，数据交换

    服务类 中间人:service服务中的bind对象 创建中间人并通过onBinder方法的return暴露出去 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...

  5. Spring Cache简单介绍和使用

    Spring Cache 缓存是实际工作中非经常常使用的一种提高性能的方法, 我们会在很多场景下来使用缓存. 本文通过一个简单的样例进行展开,通过对照我们原来的自己定义缓存和 spring 的基于凝视 ...

  6. AB串

    题目: 给定n个A和2n个B.用这些字符拼成一个字符串.要求这个串的全部前缀和后缀B的个数始终不少于A. (一个字符串的前缀是仅仅从开头到某个位置为止的子串,后缀是仅仅从某个位置到结尾的子串). 输入 ...

  7. TP3.2.3 接入银联支付

    TP3.2.3 接入银联支付 项目接入银联支付的过程, 在此记录下,希望能帮助开发盆友平坑. 银联SKD链接:https://open.unionpay.com/ajweb/product/newPr ...

  8. EL表达式的简单实用

    EL表达式 EL(Expression Language) 是为了使JSP写起来更加简单.表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言,它提供了在 JSP 中简化表达式的方 ...

  9. Spark Streaming VS Flink Streaming

    引自:https://www.slideshare.net/datamantra/introduction-to-flink-streaming

  10. AutoFac+ASP.NetMvc,AspNet.Core

    ASP.Net.Mvc 引用 install-package autofac install-package Mvc5 //创建一个用于注册的对象 ContainerBuilder builder = ...