温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jQuery中怎么实现调用WCF

发布时间:2021-06-20 16:00:53 来源:亿速云 阅读:219 作者:Leah 栏目:web开发

这期内容当中小编将会给大家带来有关jQuery中怎么实现调用WCF,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

一、我们首先建好一个项目,在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服务,而且可以看到返回的数据格工及详细内容,而且如果调用出错,也可以给出明确的出错信息。

jQuery中怎么实现调用WCF

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

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

上述就是小编为大家分享的jQuery中怎么实现调用WCF了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI