jQuery实现ajax调用WCF服务的方法（附带demo下载）

本文实例讲述了jQuery实现ajax调用WCF服务的方法。分享给大家供大家参考，具体如下：
关于AJAX调用WCF服务分为跨域和不跨域两种方式，今天咱们先介绍下不跨域下的调用方法。DEMO是在VS2008写的.
经过测试与研究，发现AJAX调用WCF服务必须满足以下条件
1.wcf的通讯方式必须使用webHttpBinding
2.必须设置<endpointBehaviors>节点的值
3.服务的实现必须添加标记
复制代码代码如下:[AspNetCompatibilityRequirements（RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed）]
4.方法前面必须添加如下标记
复制代码代码如下:[WebInvoke（Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json）]
5.ajax方法中传递的参数名称必须和wcf服务中提供的参数方法名称一致
以下是本人写的代码，标记颜色的是需要注意的地方
服务器端配置文件代码

<system.serviceModel> <services><service name="WcfServiceDemoOne.Service1" behaviorConfiguration="WcfServiceDemoOne.Service1Behavior"> <！-- Service Endpoints --> <endpoint address="" binding="webHttpBinding" contract="WcfServiceDemoOne.IService1" behaviorConfiguration="HttpBehavior"></endpoint> <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/> <host><baseAddresses> <add baseAddress="http://localhost:12079/Service1.svc"/></baseAddresses> </host></service> </services> <behaviors><serviceBehaviors> <behavior name="WcfServiceDemoOne.Service1Behavior"><！-- 为避免泄漏元数据信息，请在部署前将以下值设置为 false 并删除上面的元数据终结点--><serviceMetadata httpGetEnabled="true"/><！-- 要接收故障异常详细信息以进行调试，请将以下值设置为 true。在部署前设置为 false 以避免泄漏异常信息--><serviceDebug includeExceptionDetailInFaults="false"/> </behavior></serviceBehaviors> <endpointBehaviors> <behavior name="HttpBehavior"><webHttp/> </behavior> </endpointBehaviors> </behaviors> </system.serviceModel>

服务器端代码

[ServiceContract]public interface IService1{ [OperationContract] string GetData（int value）; [OperationContract] City GetDataUsingDataContract（City composite）;[OperationContract] List<City> GetList（）;[OperationContract] List<City> GetListData（List<City> list）;}// 使用下面示例中说明的数据约定将复合类型添加到服务操作。[DataContract]public class City{ int seq = 0; string cityID; string ctiyName;[DataMember] public string CityID {get{ return cityID;}set{ cityID=value;} } [DataMember] public string CityName {get { return ctiyName; }set { ctiyName = value; } } [DataMember] public int Seq {get{ return seq; }set{ seq = value; } } }

实现代码

[AspNetCompatibilityRequirements（RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed）]public class Service1 : IService1{ [WebInvoke（Method = "POST", BodyStyle = WebMessageBodyStyle.WrappedRequest, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json）] public string GetData（int value） {return string.Format（"You entered: {0}", value）; } #region IService1 成员 [WebInvoke（Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json）] public City GetDataUsingDataContract（City composite） {City c = new City（）;c.CityID = composite.CityID;c.CityName = composite.CityName;c.Seq = composite.Seq;return c; } [WebInvoke（Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json）] public List<City> GetList（） {List<City> list = new List<City>（）;City cc = new City（）;cc.CityID = "1";cc.CityName="北京";cc.Seq = 3;list.Add（cc）;City cc1 = new City（）;cc1.CityID = "2";cc1.CityName = "上海";cc1.Seq = 4;list.Add（cc1）;return list; } [WebInvoke（Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json）] public List<City> GetListData（List<City> list） {return list; } #endregion }

客户端调用代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WcfServiceDemoOne.WebForm1" %> <！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"><title></title><script src="jquery-1.7.1.min.js" type="text/javascript"></script><script type="text/javascript">//参数为整数的方法 function fn1（） {$.ajax（{url: "http://localhost:12079/Service1.svc/GetData", type: "POST", contentType: "text/json", data: "{"value":2}", dataType: "json", success: function（returnValue） {alert（returnValue）; }, error: function（） {alert（"error"）; }}）; } //参数为实体类的方法 function fn2（） {$.ajax（{url: "http://localhost:12079/Service1.svc/GetDataUsingDataContract", type: "POST", contentType: "application/json", data: "{"CityID":1,"CityName":"北京","Seq":"3"}", dataType: "json", success: function（returnValue） { alert（returnValue.CityID + " " + returnValue.CityName + "--" + returnValue.Seq）; }, error: function（） {alert（"error"）; }}）; } //返回值为类集合的方法 function fn3（） {$.ajax（{ url: "http://localhost:12079/Service1.svc/GetList", type: "POST", contentType: "application/json", dataType: "json", success: function（returnValue） { for （var i = 0; i < returnValue.length; i++） {alert（returnValue[i].CityID + " " + returnValue[i].CityName+"---"+returnValue[i].Seq）;} }, error: function（） {alert（"error"）; }}）; } function fn4（） {$.ajax（{url: "http://localhost:12079/Service1.svc/GetListData", type: "POST", contentType: "application/json", data: "[{"CityID":1,"CityName":"北京","Seq":"3"},{"CityID":3,"CityName":"上海","Seq":"3"}]", dataType: "json", success: function（returnValue） { for （var i = 0; i < returnValue.length; i++） {alert（returnValue[i].CityID + " " + returnValue[i].CityName + "---" + returnValue[i].Seq）; } }, error: function（） {alert（"error"）; }}）; }</script> </head> <body><form id="form1" runat="server"><div> <input id="Button1" type="button" value="调用1" onclick="fn1（）;" /></div> <input id="Button2" type="button" value="调用2" onclick="fn2（）;" /> <br /><input id="Button3" type="button" value="调用3" onclick="fn3（）;" /></form><br /><input id="Button4" type="button" value="调用4" onclick="fn4（）;"/> </body> </html>

完整实例代码代码点击此处本站下载。
希望本文所述对大家jQuery程序设计有所帮助。