调用jquery,Jquery调用WCF经验分享

on 2011-5-8 in 博文摘选 | 0 Comment
博客园申请开通有一段时间了，一直没写博客，真对不起博客园，郁闷费话少说，今天有时间，来总结一下最近项目中用的一些知识知，主要是Jquery调用WCF服务。本文讨论一下Jquery异步调用WCF服务的过程中需要注意的各种问题及经验分享。
我所使用的机器环境是：Windows7　VS2010　。
一、我们首先建好一个项目，在VS2010中，建立好一个Web项目，并添加一个“启用了Ajax的WCF服务”。
二、添加完成后，会自动打开刚才添加的文件，我们进行一些简的修改，便于一会客户端去调用，修改代码如下：
调用jquery,Jquery调用WCF经验分享调用jquery,Jquery调用WCF经验分享View Code 1 [ServiceContract(Namespace = "")] 2 [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 3 public class DataService 4 { 5 /// 6 /// 一、简单调用服务端方法 7 /// 8 /// 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 17 }

三、客户端代码中如下： View Code 1 2 3 4 5 18 19 20
21
22 23
24
25 26

以上是最基本的调用没有什么可说的.
下面，我们来进行一个稍微复杂点的例子演示，我们在实现的效果是：“客户端提交一个注册信息，然后在服务器区取并解析成一个实体类对象，然后返回客户端状态。服务端代码如下：
View Code 1 /// 2 /// 二、由客户端传入数据示例 3 /// 4 /// Json格式的UserInfo数据
5 /// 6 [OperationContract] 7 [WebGet(ResponseFormat=WebMessageFormat.Json)] //必须是WebGet，客户端对应着Get方式请求，如果是POST方式，服务端而是WebInvoke，不过很遗憾，暂时貌似好不支持，反正我是没使用成功，有知道的请告诉我 8 public string Register(string userInfo) 9 { 10 UserInfo model = JsonConvert.DeserializeObject(userInfo);//Newtonsoft.Json 使用第三方类库将传入的Json字符串反序列化成实体类。 11 return string.Format("hello {0} sir!", model.LoginName); 12 }

然后客户端对应如下：
View Code 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类型数据并解析，同样服务端代码如下：
View Code 1 [OperationContract] 2 [WebGet(ResponseFormat = WebMessageFormat.Json)] 3 public List GetAll() 4 { 5 List lists = new List() 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 }

客户端代码如下：
View Code 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("用户名：" + data.d[i].LoginName + "密码：" + data.d[i].Password + "
"); 8 } 9 }, 10 error: function (msg) { 11 alert(msg.responseText); 12 } 13 }) 14 })

好了，三种最常用的调用方式就这样了，当然，你可以稍微修改一下连接上数据库一起使用，最后我总结一下，在调用过程常见的错误及解决方法。
一、推荐使用Firebug去调试，在Firebug中有一个“网络”选项卡，在那里，你可以清楚的看到你是否成功调用WCF服务，而且可以看到返回的数据格工及详细内容，而且如果调用出错，也可以给出明确的出错信息。
调用jquery,Jquery调用WCF经验分享
二、在调试阶端，推荐使用“GET”方式请求服务，然后在error:funcation(msg){alert(msg.responseText);}这样同样也能看到大部份出错提示。
三、配置文件，在添加时就自动配置好了，所以一般情况下没有特殊要求无需更改。这是VS2010中的好处。
四、可以参考一些文章如《JQuery调用WCF需要注意的一些问题》
欢迎批评！
Tags:  调用jquery

延伸阅读

最新评论

发表评论