jQuery以JSONP的访问调用一个WCF REST服务

JSONP(JSON with Padding)可以看成是JSON的一种“使用模式”,用以解决“跨域访问”的问题.

下面是一个简单的例子用于模拟如何通过jQuery以JSONP的访问调用一个WCF REST服务。

在这个例子中,我们将定义一个用于返回所有员工信息的服务,

下面是用于表示员工信息的Employee的类型和契约接口。

契约接口IEmployees的GetAll操作用以返回所有员工列表,我们指定了Uri模板并将回复消息格式设置为JSON。

 1: using System.Collections.Generic;2: using System.ServiceModel;3: using System.ServiceModel.Web;4: namespace Artech.WcfServices.Service.Interface5: {6:     [ServiceContract]7:     public interface IEmployees8:     {9:         [WebGet(UriTemplate = "all",ResponseFormat =WebMessageFormat.Json)]      10:         IEnumerable<Employee> GetAll();11:     }12:     public class Employee13:     {14:         public string Id { get; set; }15:         public string Name { get; set; }16:         public string Department { get; set; }17:         public string Grade { get; set; }18:     }19: }

 

在如下所示的服务类型EmployeesService 中,我们直接让服务操作GetAll返回一个包含3个Employee对象的列表。

   1: using System.Collections.Generic;2: using Artech.WcfServices.Service.Interface;3: namespace Artech.WcfServices.Service4: {5:     public class EmployeesService : IEmployees6:     {7:         public IEnumerable<Employee> GetAll()8:         {9:             return new List<Employee>10:             {11:                 new Employee{ Id = "001", Name="张三", Department="开发部", Grade = "G6"},    12:                 new Employee{ Id = "002", Name="李四", Department="人事部", Grade = "G7"}, 13:                 new Employee{ Id = "003", Name="王五", Department="销售部", Grade = "G8"}14:             };15:         }16:     }17: }

 

我们通过控制台程序对服务进行寄宿。从下面的配置可以看到我们采用了标准终结点WebHttpEndpoint。

为了让服务具有跨域支持的能力,我们必须将标准终结点的crossDomainScriptAccessEnabled属性设置为True。

WebHttpBinding也具有同名的属性,如果直接使用WebHttpBinding也需要将该属性设置为True。

   1: <configuration>2:   <system.serviceModel>3:     <standardEndpoints>4:       <webHttpEndpoint>5:         <standardEndpoint crossDomainScriptAccessEnabled="true"/>6:       </webHttpEndpoint>7:     </standardEndpoints>8:     <bindings>9:       <webHttpBinding>10:         <binding crossDomainScriptAccessEnabled="true" />11:       </webHttpBinding>12:     </bindings>13:     <services>      14:       <service name="Artech.WcfServices.Service.EmployeesService">15:         <endpoint kind="webHttpEndpoint" 16:                   address="http://127.0.0.1:3721/employees"17:                   contract="Artech.WcfServices.Service.Interface.IEmployees"/>18:       </service>19:     </services>20:   </system.serviceModel>21: </configuration>

 

在客户端,我们在一个Web页面中通过jQuery进行Ajax调用这个服务,并将得到的员工列表显示在一个表格中。

注意dataType选项设置成“jsonp”而不是“json”。

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2: <html xmlns="http://www.w3.org/1999/xhtml">3:   <head>4:     <title>员工列表</title>5:     <style type="text/css">6:        ...7:     </style>8:     <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>9:     <script type="text/javascript">10:         $(function () {11:             $.ajax({12:                 type: "get",13:                 url: "http://127.0.0.1:3721/employees/all",14:                 dataType: "jsonp",15:                 success: function (employees) {16:                     $.each(employees, function (index, value) {17:                         var detailUrl = "detail.html?id=" + value.Id;18:                         var html = "<tr><td>";19:                         html += value.Id + "</td><td>";20:                         html += "<a href='" + detailUrl + "'>" + value.Name + "</a></td><td>";21:                         html += value.Grade + "</td><td>";22:                         html += value.Department + "</td></tr>";23:                         $("#employees").append(html);24:                     });25:                     $("#employees tr:odd").addClass("oddRow");26:                 }27:             });28:         });29:      </script>30:   </head>31:   <body>32:     <table id="employees" width="600px">33:         <tr>34:             <th>ID</th>35:             <th>姓名</th>36:             <th>级别</th>37:             <th>部门</th>38:         </tr>39:     </table>40: </body>41: </html>

 

转载于:https://www.cnblogs.com/besuccess/articles/3489514.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/399825.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用python将excel数据导入数据库

https://www.cnblogs.com/longbigbeard/p/9309180.html 因为需要对数据处理&#xff0c;将excel数据导入到数据库&#xff0c;记录一下过程。使用到的库&#xff1a;xlrd 和 pymysql &#xff08;如果需要写到excel可以使用xlwt&#xff09;直接丢代码&#xff0c;使用python…

imageDownloader

.h #import <UIKit/UIKit.h> protocol imageDownloadDelegate <NSObject> optional -(void)imageDownloadWithImage:(UIImage *)image; end // 声明一个block 参数类型是UIImage 返回值是void 别名Result typedef void(^Result)(UIImage *img); interface ImageDow…

Android核心分析之二十七Android GDI 之SurfaceFlinger之动态结构示

SurfaceFlinger对象建立过程示意  1 SurfaceSession的建立  客户端请求建立Surface时&#xff0c;首先在要与SurfaceFlinger建立一个Session&#xff0c;然后再Session上建立一个Connection通过概念返回Bclient对象。WindowManagerService在添加第一个窗口前会检查SurfaceS…

maven详解之坐标与依赖

2019独角兽企业重金招聘Python工程师标准>>> 看着简单而又复杂的pom.xml文件&#xff0c;看似熟悉&#xff0c;当自己编写的时候觉得简单&#xff0c;但是看人家项目的时候又觉得复杂的很&#xff0c;现在我们一起来分析这个pom文件。 Maven的坐标为各种构件引入了秩…

修改数据表部分字段方法封装-及-动态生成对象并动态添加属性

代码&#xff1a; //这样写的话&#xff0c;输入的是表的行对象&#xff0c;返回的是数据字典&#xff0c;可以直接用到更新操作里&#xff0c;public static Object AlterDate(Object tabledataobj){List<string> namelist new List<string>();List<Object>…

flask 上传 excel 并导入mysql

参考&#xff1a; flask 文件的上传下载和excel操作 Python 将Excel表格数据导入MySQL数据库

各种无线加密方式

所有的无线网络都提供某些形式的加密。但无线路由器、无线AP、或中继器的无线信号范围很难控制得准确&#xff0c;外界也是很大机会的能访问到该无线网络&#xff0c;一旦他们能访问该内部网络时&#xff0c;该网络中所有是传输的数据对他们来说都是透明的。如果这些数据都没经…

EF6源码学习-准备篇

现在对于。net开发人员来说EF已经很流行了&#xff0c;虽然我在2010年的时候就用过EF&#xff0c;也看过几本书&#xff0c;但是还没有仔细研究EF的code&#xff0c; 曾经也尝试阅读EF5的源代码&#xff0c;后来由于时间关系也没有坚持住。现在计划阅读EF6 code first部分的源码…

flask 对excel上传下载操作和文件处理

文件的下载 from flask import send_from_directory excel_bp.route(/get_attachment/<path:filename>) def get_attachment(filename): return send_from_directory(app.config[UPLOAD_FOLDER],filename,as_attachmentTrue) 文件的上传 &#xff08;1&#xff09;ht…

maven 本地包依赖包打进jar

1.声明依赖jar的时候使用 <dependency> <groupId>test</groupId> <artifactId>test</artifactId> <version>1.1</version> <scope>system</scope> <systemPath>${project.basedir}/lib/a.jar</systemPath> …

xml学习总结(四)

命名空间 &#xff08;1&#xff09;产生 问题&#xff1a;在不同的约束文档中&#xff0c;有不同好安逸的相同标记名称 解决办法 每个约束模式人当被赋予一个唯一的名称空间&#xff0c;每个名称空间可用一个唯一的URI表示 在XML实例中为来自不同模式文档的元素重甲不同的前缀…

Flask入门之上传文件到服务器

https://www.cnblogs.com/wongbingming/p/6802660.html flask 文件的上传下载和excel操作 Flask入门之上传文件到服务器 今天要做一个简单的页面&#xff0c;可以实现将文件 上传到服务器&#xff08;保存在指定文件夹&#xff09; #Sample.py # coding:utf-8from flask i…

ASP入门(十一)-Session小案例

一般来说&#xff0c;在实际开发中&#xff0c;对于 Session 对象使用最多的就是用户登录部分了&#xff0c;这个案例将简单模拟一个用户登录表单、用户是否登录的判断以及用户退出的一系列功能&#xff0c;它一共分了以下几个页面。 Login.asp (用户登录)、Check.asp (用户是否…

智能家居资源汇总

智能家居中红外控制系统通讯协议分析.pdf 智能家居中视频监控系统的设计与实现_林琳.caj 智能家居中视频监控系统设计_董翠英.pdf 智能家居系统——语音识别.pdf 智能家居系统中家庭网关的研究.pdf 智能家居系统中家电控制的研究与实现.kdh 智能家居系统语音遥控器的设计与实现…

sql语句--时间

1.时间的比较&#xff1a;时间是日期类型、字符串类型&#xff0c;long型&#xff0c;直接比较 例&#xff1a; SELECT * FROM student where date1 BETWEEN 2017-09-15 09:07:17 AND 2017-09-15 09:08:19 2.from_unixtime(long型date)&#xff1a;将时间戳转为时间 例&#xf…

JS 判断上传文件是否为EXCEL 文件

<SCRIPT language"JavaScript"> function checkform(o){var f_content form1.file.value;var fileextf_content.substring(f_content.lastIndexOf("."),f_content.length)fileextfileext.toLowerCase()if (fileext!.xls){alert("对不起&#x…

[转]打造自己的LINQ Provider(上):Expression Tree揭秘

概述 在.NET Framework 3.5中提供了LINQ 支持后&#xff0c;LINQ就以其强大而优雅的编程方式赢得了开发人员的喜爱&#xff0c;而各种LINQ Provider更是满天飞&#xff0c;如LINQ to NHibernate、LINQ to Google等&#xff0c;大有“一切皆LINQ”的趋势。LINQ本身也提供了很好的…

2017.9.15 postgresql批量插入造成冲突后执行更新

参考来自&#xff1a;https://stackoverflow.com/questions/40647600/postgresql-multi-value-upserts/46233907#46233907 1.before insert 2.insert sql 3.after insert 注意这里有两个容易出错的点&#xff1a;1.如果label字段不是必填的&#xff0c;要注意语法会不会出错。万…

所有程序员都应该遵守的11条规则

我是一个倾向于生活在规则下的人。 现在&#xff0c;这些规则大部分是我本人为自己设立的&#xff0c;但它们依然是规则。 我发现为自己创建规则可以让我过得更好&#xff0c;因为这样做可以提前决定一些事情&#xff0c;而不是要在匆忙中做出所有的决定。 我今天早上应该去健身…

mybatis动态SQL语句

三、动态SQL语句 有些时候&#xff0c;sql语句where条件中&#xff0c;需要一些安全判断&#xff0c;例如按性别检索&#xff0c;如果传入的参数是空的&#xff0c;此时查询出的结果很可能是空的&#xff0c;也许我们需要参数为空时&#xff0c;是查出全部的信息。这是我们可以…