jQuery Ajax调用WCF服务详细教程_H5之家 - 中国HTML5教程资源分享第一站

jQuery Ajax调用WCF服务详细教程

发布于 2017-04-12 17:18:19 | 11 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例，程序狗速度看过来！

jQuery javascript框架jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

这篇文章主要介绍了jQuery Ajax调用WCF服务详细教程,本文讲解了从WFC编程到JQUERY调用的详细步骤,并总结了使用中遇到的问题和解决方法,需要的朋友可以参考下

这两天在写基于WCF服务的后台框架，过程中遇到了一些挫折，经过努力全部解决了，在此分享给大家，使用的工具是Visual Studio 2013。

该后台需要支持通过json来传递和接收数据。

首先，说说搭建过程。

第一步：创建WCF服务应用程序项目WCF。

第二步，创建服务使用的数据类

using System; using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations.Schema; using System.Runtime.Serialization; namespace WCF { [DataContract] [Table("TUser")] public class Person { [DataMember] public int ID { get; set; } [DataMember] [StringLength(100)] public string LoginName { get; set; } [DataMember] [StringLength(100)] public string Password { get; set; } [DataMember] [DataType(DataType.Date)] public DateTime CreateDate { get; set; } } }

这里，由于我使用EF来与数据库交互，所以使用了Table、StringLength、DataType。若你未使用EF，可以不加这些。DataContract是用来标志当前类在序列化时需要参考DataMember属性，若不设DataContract或仅设置DataMember，则所有共有属性和字段全部序列化，否则，只对设置有DataMember的序列化。注意，DataContract和DataMember与反序列化无关，也就是说，当把一个json对象字符串传递给WCF服务时，不管该字段上是否有DataMember，都会被反序列化。

第三步：创建服务契约接口

如果你的服务仅仅用来提供Ajax等一些非WCF客户端访问的，那么是不需要接口的，把接口定义中的各种Attribute直接加在服务提供的类的定义上即可。但是为了能让程序可以通过服务接口来访问，那么必须使用接口，例如：前端MVC+后台WCF的架构形式。

using System.Collections.Generic; using System.ServiceModel; using System.ServiceModel.Web; namespace WCF { [ServiceContract] public interface IPersonService { [OperationContract] [WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)] Person CreatePerson(string loginName, string password); //服务功能2 [OperationContract] [WebGet(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)] bool CheckMan(string loginName); } }

第四步，创建基于契约接口提供实际服务的类

由于我的服务需要支持Ajax，所以选择“WCF服务（支持Ajax）”一项，具体代码如下：

using System; using System.Collections.Generic; using System.ServiceModel.Activation; namespace WCF { [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class PersonService : IPersonService { public Person CreatePerson(string loginName, string password) { return new PersonBLL().CreatePerson(loginName,password); } public bool CheckMan(string loginName) { return new PersonBLL().CheckMan(loginName); } } }

上述的PersonBLL是用来实际处理数据的业务逻辑层，有兴趣的伙伴们可以自己写个简单的实现。

第五步，创建网页客户端。

在此为了避免处理跨域问题，故把网页post_get_test.html放在WCF项目下。

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jqueryjson.js"></script> <title></title> </head> <body> <p> <input type="button" value="POST_CreatePerson" /><br> <input type="button" value="GET_CheckMan" /><br> <input type="text" /> <input type="text" /> </p> <script type="text/javascript"> $(document).ready(function () { $('#createPerson').click(function () { $.ajax({ type: "post", url: "personservice.svc/CreatePerson", data: '{"loginName":"' + $("#loginName").val() + '","password":"' + $("#password").val() + '"}', contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { alert("ID:" + data.d.ID + " Name:" + data.d.LoginName + " Password:" + data.d.Password + " CreateDate:" + data.d.CreateDate); }, error: function (xhr) { alert(xhr.responseText); } }); }); $('#checkMan').click(function () { $.getJSON("PersonService.svc/CheckMan", 'loginname="' + $("#loginName").val() + '"', function (data) { alert(data.d); }); }); }); </script> </body> </html>

建议在开发过程中采纳createPerson按钮调用方式来写，其可以通过error回调函数来反馈实际出错原因，方便调试。

第六步，发布WCF服务

右击WCF项目选择“发布”菜单项，在弹出窗口中的下拉列表中选择“新建配置文件”，输入配置文件名称，点击“确定”按钮后进入连接设置界面，如下：