jQuery調用WCF開發實例經驗分享
我所使用的機器環境是：Windows7 VS2010 。
一、我們首先建好一個項目，在VS2010中，建立好一個Web項目，并添加一個“啟用了Ajax的WCF服務”。
二、添加完成后，會自動打開剛才添加的文件，我們進行一些簡的修改，便于一會客戶端去調用，修改代碼如下：
- [ServiceContract(Namespace = "")]
- [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
- public class DataService
- {
- /// <summary>
- /// 一、簡單調用服務端方法
- /// </summary>
- /// <returns></returns>
- [OperationContract]
- [WebGet()]
- public string DoWork()
- {
- return string.Format("Today is {0}",DateTime.Now.ToString("yyyy年MM月dd日 HH:mm:ss:fff"));
- }
- }
三、客戶端代碼中如下：
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $("#btnGetServerDate").click(function () {
- $.ajax({
- url: "DataService.svc/DoWork",
- type: "get",
- success: function (data) {
- alert(data.d);
- }
- })
- });
- })
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <input id="btnGetServerDate" type="button" value="簡單調用" title="顯示服務器上的時間" /></div>
- </form>
- </body>
- </html>
以上是最基本的調用沒有什么可說的.
下面，我們來進行一個稍微復雜點的例子演示，我們在實現的效果是：“客戶端提交一個注冊信息，然后在服務器端取出并解析成一個實體類對象，然后返回客戶端狀態。服務端代碼如下：
- /// <summary>
- /// 二、由客戶端傳入數據示例
- /// </summary>
- /// <param name="userInfo">Json格式的UserInfo數據</param>
- /// <returns></returns>
- [OperationContract]
- [WebGet(ResponseFormat=WebMessageFormat.Json)] //必須是WebGet，客戶端對應著Get方式請求，如果是POST方式，服務端而是WebInvoke，不過很遺憾，暫時貌似好不支持，反正我是沒使用成功，有知道的請告訴我
- public string Register(string userInfo)
- {
- UserInfo model = JsonConvert.DeserializeObject<UserInfo>(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<UserInfo> GetAll()
- {
- List<UserInfo> lists = new List<UserInfo>()
- {
- 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("<a>用戶名：" + data.d[i].LoginName + "</a><a>密碼：" + data.d[i].Password + "</a><br />");
- }
- },
- 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
【編輯推薦】
