jQuery调用WCF开发实例经验分享

[ServiceContract(Namespace = "")]   
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]  
public class DataService  
     {   
         /// 
   
         /// 一、简单调用服务端方法   
        ///    
         ///   
         [OperationContract]  
         [WebGet()]  
         public string DoWork()  
         {            
             return string.Format("Today is {0}",DateTime.Now.ToString("yyyy年MM月dd日 HH:mm:ss:fff"));  
         }  
          
     } 

   
     
       
         
         
         $(document).ready(function () {   
             $("#btnGetServerDate").click(function () {   
                 $.ajax({   
                     url: "DataService.svc/DoWork",  
                     type: "get",  
                     success: function (data) {  
                         alert(data.d);  
                     }  
                 })  
             });  
         })  
       
   
   
       
     
  
      
         

以上是最基本的调用没有什么可说的.

下面，我们来进行一个稍微复杂点的例子演示，我们在实现的效果是：“客户端提交一个注册信息，然后在服务器端取出并解析成一个实体类对象，然后返回客户端状态。服务端代码如下：

/// 
   
       /// 二、由客户端传入数据示例        
       ///    
       /// Json格式的UserInfo数据   
       ///    
       [OperationContract]   
       [WebGet(ResponseFormat=WebMessageFormat.Json)] //必须是WebGet，客户端对应着Get方式请求，如果是POST方式，服务端而是WebInvoke，不过很遗憾，暂时貌似好不支持，反正我是没使用成功，有知道的请告诉我   
       public string Register(string userInfo)   
       {  
           UserInfo model = JsonConvert.DeserializeObject(userInfo);//Newtonsoft.Json 使用第三方类库将传入的Json字符串反序列化成实体类。  
           return string.Format("hello {0} sir!", model.LoginName);  
       } 

然后客户端对应如下：

//示例二   
           $("#btnRegiter").click(function () {   
               var jsonString = "userinfo={\"loginName\":\"cheng\",\"password\":\"tomcat\"}"; //注意：我服务端只接收一个参数那就是String类型命称为userInfo的变量，所以前面对应也叫userInfo   
               $.ajax({   
                   url: "DataService.svc/Register",   
                   type:"get", //注意是Get方式，服务端对应着WebGet（）   
                   data: jsonString,   
                   success: function (data) {   
                       alert(data.d);  
                   }  
               })  
           }) 

此例子主要演示，客户端提交一个JSON字符串格式的数组到服务端，然后服务端通过反序列化方式将传入的字符串序列化成自定义对象。NET3.5自已也支持反序列化，但用的不爽，我用的是“Newtonsoft.Json”这个，但也需要注意一个问题，那就是如果客户端传入的数据是数值类型的话，请不要加引号，否则会反序列化失败。如“{"age":25}”,服务端对应“public int Age{get;set;}”。但具JSON.org上说的标准JSON格式，健/值好像都应该需要加上引号的，所以这里大家需要注意。

下面接着在演示一个客户端获取一个List类型数据并解析，同样服务端代码如下：

[OperationContract]   
         [WebGet(ResponseFormat = WebMessageFormat.Json)]   
         public List GetAll()   
         {   
           List lists = new List()    
             {    
                 new UserInfo() { LoginName = "cheng", Password = "cheng" },   
                 new UserInfo() { LoginName = "tomcat", Password = "tomcat" }    
             };  
             return lists;  
         }  
   
 [DataContract]  
     public class UserInfo  
     {  
         private string _loginName;  
         private string _password;  
   
         [DataMember]  
         public string Password  
         {  
             get { return _password; }  
             set { _password = value; }  
         }  
         [DataMember]  
         public string LoginName  
         {  
             get { return _loginName; }  
             set { _loginName = value; }  
         }  
     } 

客户端代码如下：

$("#btnGetAllUser").click(function () {   
                 $.ajax({   
                     url: "DataService.svc/GetAll",   
                     type: "get", //注意是Get方式，服务端对应着WebGet（）                
                     success: function (data) {   
                         for (var i = 0; i < data.d.length; i++) {   
                             $("#divContent").append("用户名：" + data.d[i].LoginName + "密码：" + data.d[i].Password + "");                              
                         }   
                     },  
                     error: function (msg) {  
                         alert(msg.responseText);  
                     }  
                 })  
             }) 

好了，三种最常用的调用方式就这样了，当然，你可以稍微修改一下连接上数据库一起使用，***我总结一下，在调用过程常见的错误及解决方法。

一、推荐使用Firebug去调试，在Firebug中有一个“网络”选项卡，在那里，你可以清楚的看到你是否成功调用WCF服务，而且可以看到返回的数据格工及详细内容，而且如果调用出错，也可以给出明确的出错信息。

二、在调试阶端，推荐使用“GET”方式请求服务，然后在error:funcation(msg){alert(msg.responseText);}这样同样也能看到大部份出错提示。

三、配置文件，在添加时就自动配置好了，所以一般情况下没有特殊要求无需更改。这是VS2010中的好处。

原文链接：http://www.cnblogs.com/bdqlaccp/archive/2011/05/08/2039415.html

【编辑推荐】

1. 5月***超有趣的免费jQuery插件推荐
2. 从零开始学习jQuery之管理jQuery包装集
3. jQuery性能指标和调优
4. 手把手教你jQuery jqPlot画图插件
5. 从零开始学习jQuery之***的选择器