宝哥软件园

jQuery Ajax调用WCF服务详细教程

编辑:宝哥软件园 来源:互联网 时间:2021-09-09

这两天在写基于WCF服务的后台框架,过程中遇到了一些挫折,经过努力全部解决了,在此分享给大家,使用的工具是Visual Studio 2013。

该后台需要支持通过json来传递和接收数据。

首先,说说搭建过程。

第一步:创建WCF服务应用程序项目WCF。

第二步,创建服务使用的数据类

使用系统;使用系统。组件模型。数据注释;使用系统。组件模型。数据注释。模式;使用系统。运行时。序列化;命名空间WCF {[数据合同][表格(' TUser ')]公共类人员{[数据成员]公共int ID { get设置;}[数据成员][字符串长度(100)]公共字符串LoginName { get设置;}[数据成员][字符串长度(100)]公共字符串密码{ get设置;}[数据成员][数据类型(数据类型.日期)]公共日期时间CreateDate { get设置;} }}这里,由于我使用仰角指示器来与数据库交互,所以使用了表、字符串长度、数据类型。若你未使用EF,可以不加这些数据合同。是用来标志当前类在序列化时需要参考数据成员属性,若不设数据合同或仅设置数据成员,则所有共有属性和字段全部序列化,否则,只对设置有数据成员的序列化。注意,数据合同和数据成员与反序列化无关,也就是说,当把一个json对象字符串传递给WCF服务时,不管该字段上是否有数据成员,都会被反序列化。

第三步:创建服务契约接口

如果你的服务仅仅用来提供埃阿斯等一些非WCF客户端访问的,那么是不需要接口的,把接口定义中的各种属性直接加在服务提供的类的定义上即可。但是为了能让程序可以通过服务接口来访问,那么必须使用接口,例如:前端手动音量调节后台WCF的架构形式。

使用系统。集合。通用;使用系统服务模式.使用系统ServiceModel .网命名空间WCF {[服务合同]公共接口IPersonService {[操作约定][WebInvoke(方法=' POST ',RequestFormat=WebMessageFormat .Json,响应格式=Webmessageformat .Json,BodyStyle=WebMessageBodyStyle .包装的请求)]人员创建人员(字符串登录名,字符串密码);//服务功能2【操作合同】【WebGet(请求格式=WebMessageFormat .Json,响应格式=Webmessageformat .Json,BodyStyle=WebMessageBodyStyle .包装请求)])bool CheckMan(字符串loginName);}}第四步,创建基于契约接口提供实际服务的类

由于我的服务需要支持Ajax,所以选择“WCF服务(支持Ajax)”一项,具体代码如下:

使用系统;使用系统。集合。通用;使用系统ServiceModel .激活;命名空间WCF {[aspnet compatibility requirements(需求模式=aspnet compatibility requirements模式.允许)]公共类PersonService : IPersonService {公共Person CreatePerson(字符串登录名称,字符串密码){ 0返回新的PersonBLL().CreatePerson(登录名、密码);} public bool CheckMan(字符串loginName) {返回新的PersonBLL().检查人(登录名);} }}上述的人事基地址定位连接是用来实际处理数据的业务逻辑层,有兴趣的伙伴们可以自己写个简单的实现。

第五步,创建网页客户端。

在此为了避免处理跨域问题,故把网页post_get_test.html放在WCF项目下。

!DOCTYPE html html xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html;charset=utf-8' /脚本类型=' text/JavaScript ' src=' http : jquery-1 . 10 . 2 . js '/脚本脚本类型=' text/JavaScript ' src=' http : jqueryjson . js '/脚本标题/title/headbody p输入id='createPerson '类型='button '值='POST_CreatePerson'/br输入id='checkMan '类型='button '值=' GET _ checkMan '/ready(function(){ $(' # createPerson '))。单击(function () { $)。ajax({ type: 'post ',URL : ' person service . SVC/create person ',data : ' { loginName ' : ' ' $(' # loginName ')。val()' ',' password':'' $('#password ')。val() ''} ',contentType: '应用程序/JSON;charset=utf-8 ',dataType: 'json ',success:函数(数据){ alert(' id : ' data . d . id ' name : ' data . d . loginname ' password : ' data . d . password ' created date : ' data . d . create date);},error:函数(xhr){ alert(xhr . responsetext);} });});$('#checkMan ')。单击(function () { $)。getJSON(' personServiCe . SVC/CheckMan ',' loginname='' $('#loginName ')。val()' ' ',函数(数据){ alert(data . d);});});});/script/body/html建议在开发过程中采用createPerson按钮的调用方式,可以通过错误回调函数反馈实际错误原因,方便调试。

步骤6:发布WCF服务

右键单击WCF项目并选择“发布”菜单项。在弹出窗口的下拉列表中选择“新建配置文件”,输入配置文件的名称,点击“确定”进入连接设置界面,如下图:

'

我在我的原生IIS中发布了它,所以我选择了Web Deply发布方法。同时建议将服务器和站点名称设置为:localhost和默认网站/XXX,其中XXX可以自己定义为服务站点的名称(实际上是IIS默认站点的虚拟目录名)。这样,您的开发伙伴获得项目的源代码后,就可以在完全相同的环境中发布,从而避免因环境差异而导致的一系列问题。

设置完成后,点击“验证连接”,出现绿色勾,表示设置正确。单击“发布”。

第七步,实际测量

1.现在,您可以通过浏览器访问http://localhost/wcf/person service . SVC,确认服务器是否部署成功。以下界面显示部署成功。

2.通过浏览器访问测试网页http://localhost/wcf/post _ get _ test.html,查看功能是否正常。

其次,我们再来说说建筑过程中的各种问题。

1.当网页通过Ajax调用服务的CreatePerson方法时,方法类型写错,POST写为GET,系统报告:405(方法不允许)。另外,根据微软官网的描述,如果通过soap访问一个WCF WEB HTTP应用(使用WebHttpBinding和webhttpbrowser的服务),也会出现405错误。

2.web.config文件中端点节点的协定属性配置错误,它没有指向WCF。IPersonService网页执行时间为500(系统。service model . serviceactive exception)。在用http://localhost/wcf/personservice . SVC检查服务器部署结果时,据报道合同名称“VME。在服务“PersonService”实现的合同列表中找不到合同“personservice”。

这里需要说明的是,如果你的服务不是基于接口的,那么端点的契约可以直接指向服务类。

3.使用jQuery的ajax并在POST模式下将值发送到服务器时,由于格式错误,报告了以下错误:500(内部服务器错误),详细信息为:格式化程序在尝试反序列化消息时引发异常。正确处理有两种方法:

1)以json格式对象的形式传递,例如,复制代码如下: {'loginname' :' name ',' password' :' pwd'}

这里要强调的是,在键值对中,键必须用双引号引起来,大小写必须与服务方法中的参数定义完全相同。2)以json格式对象字符串的形式传递,如下所示:

通过开机自检传递值

a)传入非对象参数:复制的代码如下: {'loginname' 3360' name ',' password' :' pwd'} '

这里要强调的是,在键值对中,键必须是双引号,大小写必须与服务方法中的参数定义完全相同,并且值应该按照以下规则设置:字符串加双引号。b)传入对象的参数:复制代码如下: var person={ };人。LoginName=$('#loginName ')。val();人。密码=$('#password ')。val();var jsonPerson=' { ' person ' : ' $。to JSON(person)“}”;

这里需要强调的是,对象属性名的大小写必须与数据类的属性定义完全一致。

通过GET方法传递值

a)传入非对象参数:复制代码如下:“loginname=”name”

b)传入对象的参数:复制代码如下: var person={ };人。LoginName=$('#loginName ')。val();人。密码=$('#password ')。val();var jsonPerson='person=' $。托杰森(人);

最后,我们来谈谈WCF调试。

1.建议通过访问http://localhost/wcf/person service . SVC确认服务器端部署成功,然后在客户端和服务器端进行联合调试。

2.如果代码需要从客户端调试到服务器端,则必须同步调用。因此,在使用jQuery的ajax时,async必须设置为false。

更多资讯
游戏推荐
更多+