jQuery+ajax调用WCF服务步骤详解

这次给大家带来jQuery+ajax调用WCF服务步骤详解，jQuery+ajax调用WCF服务的注意事项有哪些，下面就是实战案例，一起来看一下。

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

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

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

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

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

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

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

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

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

服务器端配置文件代码

84885eed1b30b261c5cb79484b41857f 
  9c020ba5b5829ca56c307612e71824b9 
   7af72fde0425263f6225f34d11d8be49 
    6eee7f5eeb23b28f25b647b835277888 
  899ce863166bff869e9b3ac68a2abfcdbce49a4f38d6cdd67362210863eac83d 
    be0a8158e3152d2b14f2ed7522c8bc1b 
    f7e6dec31ab1a0471d06c55afaca8d77 
     e7570860ff43afa4e8fe5ee4ff7b4037 
      5150410d5ae86a9aca86e39dba09763e 
     fa66bbfdbebbb6577eb3ef9be72f23ed 
    aae1c58f530f9c5ba604cee69fb0f991 
   07aad2482592b0629b89dc8fa8f9c2a7 
  bf86d273c03a30aed53d23f25c36971a 
  916007fd9688fe14d08e356f35512ffa 
   2d335b4e8bd5e457257c0f13e71684bc 
    6c4da2614f0b2a127b823cfc6a44c0d6 
     f6d76b94f29620466291ee3eb341a02b 
     585a217627162a5737a3a01f3709aba3 
     0419a42e71e1c09b795a9222aa041d03 
     6ed898c0d9e76a35ed2d31b28e3e3069 
    f734f6031f80298e381163a7dfb9d20b 
   6561d4bb80871abf40ca480f0a6b744f 
  32bcd8fda1beba957eb36b998b6a6c69 
  f351c1019e07b6e953a97397da23e9b1 
   65e2eede2048ddef4398c4604ef3b1ef 
  f734f6031f80298e381163a7dfb9d20b 
  acc36b2e4f9d6cee49b7d135db43f75c 
  1d19725e017e18860613f450a717754b 
196c529656d77e626e143ff3bd83d11b

服务器端代码

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

客户端调用代码

808c317fcb69cc1c8a796cf2f94d8f62 
b585974ae3b7dba3039af53a9593f9c4 
9edbc9f8a17547b211646280ef16fe6e 
22e6244c9f89e2a72231546ed5a2733f 
 b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f 
 7415a4b80a7d8596d2716ae7bf1e0e2f2cacc6d41bbb37262a98f745aa00fbf0 
 8019067d09615e43c7904885b5246f0a 
 //参数为整数的方法 
  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'); 
    } 
   }); 
  } 
 2cacc6d41bbb37262a98f745aa00fbf0 
9c3bca370b5104690d9ef395f2c5f8d1 
6c04bd5ca3fcae76e30b72ad730ca86d 
 a56165225b53ae2239a99091f5fba8ce 
 e388a4556c0f65e1904146cc1a846bee 
  18907f9727f75b914a50dae593b7604594b3e26ee717c64999d7867364b1b4a3 
  3e3815dbfe676f4c0d8ab9a0f4283079 
  ff9d32c555bb1d9133a29eb4371c1213 
 9b7263d24baad11335c1e31fb2807a76f5a47148e367a6035fd7a2faa965022e 
 ff9d32c555bb1d9133a29eb4371c1213 
 61252de88165b46ea94f2085a508de08 
36cc49f0c466276486e50c850b7e4956 
73a6ac4ed44ffec12cee46588e518a5e

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery获取页面宽高方法总结

怎样用JS+jQuery做出注册信息验证

jQuery获取radio值步骤详解

以上是jQuery+ajax调用WCF服务步骤详解的详细内容。更多信息请关注PHP中文网其他相关文章！