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> <servicename="WcfServiceDemoOne.Service1"behaviorConfiguration="WcfServiceDemoOne.Service1Behavior"> <!--ServiceEndpoints--> <endpointaddress=""binding="webHttpBinding"contract="WcfServiceDemoOne.IService1"behaviorConfiguration="HttpBehavior"></endpoint> <endpointaddress="mex"binding="mexHttpBinding"contract="IMetadataExchange"/> <host> <baseAddresses> <addbaseAddress="http://localhost:12079/Service1.svc"/> </baseAddresses> </host> </service> </services> <behaviors> <serviceBehaviors> <behaviorname="WcfServiceDemoOne.Service1Behavior"> <!--为避免泄漏元数据信息，请在部署前将以下值设置为false并删除上面的元数据终结点--> <serviceMetadatahttpGetEnabled="true"/> <!--要接收故障异常详细信息以进行调试，请将以下值设置为true。在部署前设置为false以避免泄漏异常信息--> <serviceDebugincludeExceptionDetailInFaults="false"/> </behavior> </serviceBehaviors> <endpointBehaviors> <behaviorname="HttpBehavior"> <webHttp/> </behavior> </endpointBehaviors> </behaviors> </system.serviceModel>
服务器端代码
[ServiceContract]
publicinterfaceIService1
{
[OperationContract]
stringGetData(intvalue);
[OperationContract]
CityGetDataUsingDataContract(Citycomposite);
[OperationContract]
List<City>GetList();
[OperationContract]
List<City>GetListData(List<City>list);
}
//使用下面示例中说明的数据约定将复合类型添加到服务操作。
[DataContract]
publicclassCity
{
intseq=0;
stringcityID;
stringctiyName;
[DataMember]
publicstringCityID
{
get
{
returncityID;
}
set
{
cityID=value;
}
}
[DataMember]
publicstringCityName
{
get{returnctiyName;}
set{ctiyName=value;}
}
[DataMember]
publicintSeq
{
get
{returnseq;}
set
{seq=value;}
}
}
实现代码
[AspNetCompatibilityRequirements(RequirementsMode=AspNetCompatibilityRequirementsMode.Allowed)]
publicclassService1:IService1
{
[WebInvoke(Method="POST",BodyStyle=WebMessageBodyStyle.WrappedRequest,RequestFormat=WebMessageFormat.Json,ResponseFormat=WebMessageFormat.Json)]
publicstringGetData(intvalue)
{
returnstring.Format("Youentered:{0}",value);
}
#regionIService1成员
[WebInvoke(Method="POST",BodyStyle=WebMessageBodyStyle.Bare,ResponseFormat=WebMessageFormat.Json)]
publicCityGetDataUsingDataContract(Citycomposite)
{
Cityc=newCity();
c.CityID=composite.CityID;
c.CityName=composite.CityName;
c.Seq=composite.Seq;
returnc;
}
[WebInvoke(Method="POST",BodyStyle=WebMessageBodyStyle.Bare,ResponseFormat=WebMessageFormat.Json)]
publicList<City>GetList()
{
List<City>list=newList<City>();
Citycc=newCity();
cc.CityID="1";
cc.CityName="北京";
cc.Seq=3;
list.Add(cc);
Citycc1=newCity();
cc1.CityID="2";
cc1.CityName="上海";
cc1.Seq=4;
list.Add(cc1);
returnlist;
}
[WebInvoke(Method="POST",BodyStyle=WebMessageBodyStyle.Bare,ResponseFormat=WebMessageFormat.Json)]
publicList<City>GetListData(List<City>list)
{
returnlist;
}
#endregion
}
客户端调用代码
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="WebForm1.aspx.cs"Inherits="WcfServiceDemoOne.WebForm1"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="jquery-1.7.1.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
//参数为整数的方法
functionfn1()
{
$.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');
}
});
}
//参数为实体类的方法
functionfn2(){
$.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');
}
});
}
//返回值为类集合的方法
functionfn3(){
$.ajax({
url:"http://localhost:12079/Service1.svc/GetList",
type:"POST",
contentType:"application/json",
dataType:"json",
success:function(returnValue){
for(vari=0;i<returnValue.length;i++){
alert(returnValue[i].CityID+''+returnValue[i].CityName+'---'+returnValue[i].Seq);
}
},
error:function(){
alert('error');
}
});
}
functionfn4(){
$.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(vari=0;i<returnValue.length;i++){
alert(returnValue[i].CityID+''+returnValue[i].CityName+'---'+returnValue[i].Seq);
}
},
error:function(){
alert('error');
}
});
}
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
<inputid="Button1"type="button"value="调用1"onclick="fn1();"/></div>
<inputid="Button2"type="button"value="调用2"onclick="fn2();"/>
<br/>
<inputid="Button3"type="button"value="调用3"onclick="fn3();"/></form>
<br/>
<inputid="Button4"type="button"value="调用4"onclick="fn4();"/>
</body>
</html>
完整实例代码代码点击此处本站下载。
希望本文所述对大家jQuery程序设计有所帮助。