用jQuery的Ajax调用WCF服务编程心得

这两天在写基于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=""><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 id="createPerson" type="button" value="POST_CreatePerson" /><br><input id="checkMan" type="button" value="GET_CheckMan" /><br><input type="text" id="loginName" /><input type="text" id="password" /></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项目选择“发布”菜单项,在弹出窗口中的下拉列表中选择“新建配置文件”,输入配置文件名称,点击“确定”按钮后进入连接设置界面,如下:

每个人心中,都会有一个古镇情怀,流水江南,烟笼人家。

用jQuery的Ajax调用WCF服务编程心得

相关文章:

你感兴趣的文章:

标签云: