jQuery实现ajax调用WCF服务的方法介绍

这篇文章主要介绍了jquery实现ajax调用wcf服务的方法,以完整实例形式分析了jquery的ajax前端调用及后台交互调用wcf服务的相关技巧,并附带完整实例共读者下载,需要的朋友可以参考下

本文实例讲述了jQuery实现ajax调用WCF服务的方法。分享给大家供大家参考，具体如下：

关于AJAX调用WCF服务分为跨域和不跨域两种方式，今天咱们先介绍下不跨域下的调用方法。DEMO是在VS2008写的.

经过测试与研究，发现AJAX调用WCF服务必须满足以下条件

1.wcf的通讯方式必须使用webHttpBinding
2.必须设置节点的值
3.服务的实现必须添加标记

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

登录后复制

4.方法前面必须添加如下标记

[WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)]

登录后复制

5.ajax方法中传递的参数名称必须和wcf服务中提供的参数方法名称一致

以下是本人写的代码，标记颜色的是需要注意的地方

服务器端配置文件代码

登录后复制

服务器端代码

[ServiceContract]  public interface IService1  {   [OperationContract]   string GetData(int value);   [OperationContract]   City GetDataUsingDataContract(City composite);    [OperationContract]   List GetList();    [OperationContract]   List GetListData(List 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 GetList()   {    List list = new List();    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 GetListData(List list)   {    return list;   }   #endregion }

登录后复制

客户端调用代码

 nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">          //参数为整数的方法   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');     }    });   }      

登录后复制  
    

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

jQuery多级手风琴菜单的实现

jquery$.ajax()方法

以上就是jQuery实现ajax调用WCF服务的方法介绍的详细内容，更多请关注【创想鸟】其它相关文章！