jQuery调用WCF开发实例经验分享 - Go语言中文社区

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

我所使用的机器环境是：Windows7　VS2010　。

一、我们首先建好一个项目，在VS2010中，建立好一个Web项目，并添加一个“启用了Ajax的WCF服务”。

二、添加完成后，会自动打开刚才添加的文件，我们进行一些简的修改，便于一会客户端去调用，修改代码如下：

  1. [ServiceContract(Namespace = "")]   
  2. [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]  
  3. public class DataService  
  4.      {   
  5.          /// <summary>   
  6.          /// 一、简单调用服务端方法   
  7.         /// </summary>   
  8.          /// <returns></returns>  
  9.          [OperationContract]  
  10.          [WebGet()]  
  11.          public string DoWork()  
  12.          {            
  13.              return string.Format("Today is {0}",DateTime.Now.ToString("yyyy年MM月dd日 HH:mm:ss:fff"));  
  14.          }  
  15.           
  16.      } 

三、客户端代码中如下：

  1. <html xmlns="http://www.w3.org/1999/xhtml">   
  2.   <head runat="server">   
  3.      <title></title>  
  4.       <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>   
  5.       <script type="text/javascript">   
  6.          $(document).ready(function () {   
  7.              $("#btnGetServerDate").click(function () {   
  8.                  $.ajax({   
  9.                      url: "DataService.svc/DoWork",  
  10.                      type: "get",  
  11.                      success: function (data) {  
  12.                          alert(data.d);  
  13.                      }  
  14.                  })  
  15.              });  
  16.          })  
  17.      </script>  
  18.  </head>  
  19.  <body>  
  20.      <form id="form1" runat="server">  
  21.      <div>  
  22.       
  23.          <input id="btnGetServerDate" type="button" value="简单调用" title="显示服务器上的时间" /></div>  
  24.      </form>  
  25.  </body>  
  26.  </html> 

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

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

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

然后客户端对应如下：

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

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

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

  1. [OperationContract]   
  2.          [WebGet(ResponseFormat = WebMessageFormat.Json)]   
  3.          public List<UserInfo> GetAll()   
  4.          {   
  5.            List<UserInfo> lists = new List<UserInfo>()    
  6.              {    
  7.                  new UserInfo() { LoginName = "cheng", Password = "cheng" },   
  8.                  new UserInfo() { LoginName = "tomcat", Password = "tomcat" }    
  9.              };  
  10.              return lists;  
  11.          }  
  12.    
  13.  [DataContract]  
  14.      public class UserInfo  
  15.      {  
  16.          private string _loginName;  
  17.          private string _password;  
  18.    
  19.          [DataMember]  
  20.          public string Password  
  21.          {  
  22.              get { return _password; }  
  23.              set { _password = value; }  
  24.          }  
  25.          [DataMember]  
  26.          public string LoginName  
  27.          {  
  28.              get { return _loginName; }  
  29.              set { _loginName = value; }  
  30.          }  
  31.      } 

客户端代码如下：

  1. $("#btnGetAllUser").click(function () {   
  2.                  $.ajax({   
  3.                      url: "DataService.svc/GetAll",   
  4.                      type: "get", //注意是Get方式，服务端对应着WebGet（）                
  5.                      success: function (data) {   
  6.                          for (var i = 0; i < data.d.length; i++) {   
  7.                              $("#divContent").append("<a>用户名：" + data.d[i].LoginName + "</a><a>密码：" + data.d[i].Password + "</a><br />");                              
  8.                          }   
  9.                      },  
  10.                      error: function (msg) {  
  11.                          alert(msg.responseText);  
  12.                      }  
  13.                  })  
  14.              }) 

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

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

jQuery调用WCF经验分享

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

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

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

版权声明：本文来源51CTO，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：http://developer.51cto.com/art/201105/261720.htm
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
  • 发表于 2021-05-16 02:19:39
  • 阅读 ( 644 )
  • 分类：前端

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！