jQuery实现ajax调用WCF服务的方法介绍

这篇文章主要介绍了jquery实现ajax调用wcf服务的方法,以完整实例形式分析了jquery的ajax前端调用及后台交互调用wcf服务的相关技巧,并附带完整实例共读者下载,需要的朋友可以参考下
本文实例讲述了jquery实现ajax调用wcf服务的方法。分享给大家供大家参考，具体如下：
关于ajax调用wcf服务分为跨域和不跨域两种方式，今天咱们先介绍下不跨域下的调用方法。demo是在vs2008写的.
经过测试与研究，发现ajax调用wcf服务必须满足以下条件
1.wcf的通讯方式必须使用webhttpbinding
2.必须设置32bcd8fda1beba957eb36b998b6a6c69节点的值
3.服务的实现必须添加标记
[aspnetcompatibilityrequirements(requirementsmode = aspnetcompatibilityrequirementsmode.allowed)]
4.方法前面必须添加如下标记
[webinvoke(method = "post", bodystyle = webmessagebodystyle.bare, responseformat = webmessageformat.json)]
5.ajax方法中传递的参数名称必须和wcf服务中提供的参数方法名称一致
以下是本人写的代码，标记颜色的是需要注意的地方
服务器端配置文件代码
<system.servicemodel> <services> <service name="wcfservicedemoone.service1" behaviorconfiguration="wcfservicedemoone.service1behavior">  <endpoint address="" binding="webhttpbinding" contract="wcfservicedemoone.iservice1" behaviorconfiguration="httpbehavior"></endpoint> <endpoint address="mex" binding="mexhttpbinding" contract="imetadataexchange"/> <host> <baseaddresses> <add baseaddress="http://localhost:12079/service1.svc"/> </baseaddresses> </host> </service> </services> <behaviors> <servicebehaviors> <behavior name="wcfservicedemoone.service1behavior">  <servicemetadata httpgetenabled="true"/>  <servicedebug includeexceptiondetailinfaults="false"/> </behavior> </servicebehaviors> <endpointbehaviors> <behavior name="httpbehavior"> <webhttp/> </behavior> </endpointbehaviors> </behaviors> </system.servicemodel>
服务器端代码
[servicecontract] public interface iservice1 { [operationcontract] string getdata(int value); [operationcontract] city getdatausingdatacontract(city composite); [operationcontract] list<city> getlist(); [operationcontract] list<city> getlistdata(list<city> list); } // 使用下面示例中说明的数据约定将复合类型添加到服务操作。 [datacontract] public class city { int seq = 0; string cityid; string ctiyname; [datamember] public string cityid { get { return cityid; } set { cityid=value; } } [datamember] public string cityname { get { return ctiyname; } set { ctiyname = value; } } [datamember] public int seq { get { return seq; } set { seq = value; } } }
实现代码
[aspnetcompatibilityrequirements(requirementsmode = aspnetcompatibilityrequirementsmode.allowed)] public class service1 : iservice1 { [webinvoke(method = "post", bodystyle = webmessagebodystyle.wrappedrequest, requestformat = webmessageformat.json, responseformat = webmessageformat.json)] public string getdata(int value) { return string.format("you entered: {0}", value); } #region iservice1 成员 [webinvoke(method = "post", bodystyle = webmessagebodystyle.bare, responseformat = webmessageformat.json)] public city getdatausingdatacontract(city composite) { city c = new city(); c.cityid = composite.cityid; c.cityname = composite.cityname; c.seq = composite.seq; return c; } [webinvoke(method = "post", bodystyle = webmessagebodystyle.bare, responseformat = webmessageformat.json)] public list<city> getlist() { list<city> list = new list<city>(); city cc = new city(); cc.cityid = "1"; cc.cityname="北京"; cc.seq = 3; list.add(cc); city cc1 = new city(); cc1.cityid = "2"; cc1.cityname = "上海"; cc1.seq = 4; list.add(cc1); return list; } [webinvoke(method = "post", bodystyle = webmessagebodystyle.bare, responseformat = webmessageformat.json)] public list<city> getlistdata(list<city> list) { return list; } #endregion }
客户端调用代码
<%@ page language="c#" autoeventwireup="true" codebehind="webform1.aspx.cs" inherits="wcfservicedemoone.webform1" %> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript"> //参数为整数的方法 function fn1() { $.ajax({ url: "http://localhost:12079/service1.svc/getdata", type: "post", contenttype: "text/json", data: '{"value":2}', datatype: "json", success: function(returnvalue) { alert(returnvalue); }, error: function() { alert('error'); } }); } //参数为实体类的方法 function fn2() { $.ajax({ url: "http://localhost:12079/service1.svc/getdatausingdatacontract", type: "post", contenttype: "application/json", data: '{"cityid":1,"cityname":"北京","seq":"3"}', datatype: "json", success: function(returnvalue) { alert(returnvalue.cityid + ' ' + returnvalue.cityname + "--" + returnvalue.seq); }, error: function() { alert('error'); } }); } //返回值为类集合的方法 function fn3() { $.ajax({ url: "http://localhost:12079/service1.svc/getlist", type: "post", contenttype: "application/json", datatype: "json", success: function(returnvalue) { for (var i = 0; i < returnvalue.length; i++) { alert(returnvalue[i].cityid + ' ' + returnvalue[i].cityname+'---'+returnvalue[i].seq); } }, error: function() { alert('error'); } }); } function fn4() { $.ajax({ url: "http://localhost:12079/service1.svc/getlistdata", type: "post", contenttype: "application/json", data: '[{"cityid":1,"cityname":"北京","seq":"3"},{"cityid":3,"cityname":"上海","seq":"3"}]', datatype: "json", success: function(returnvalue) { for (var i = 0; i < returnvalue.length; i++) { alert(returnvalue[i].cityid + ' ' + returnvalue[i].cityname + '---' + returnvalue[i].seq); } }, error: function() { alert('error'); } }); } </script> </head> <body> <form id="form1" runat="server"> <p> <input id="button1" type="button" value="调用1" onclick="fn1();" /></p> <input id="button2" type="button" value="调用2" onclick="fn2();" /> <br /> <input id="button3" type="button" value="调用3" onclick="fn3();" /></form> <br /> <input id="button4" type="button" value="调用4" onclick="fn4();"/> </body> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
jquery多级手风琴菜单的实现
jquery$.ajax()方法
以上就是jquery实现ajax调用wcf服务的方法介绍的详细内容。

jQuery实现ajax调用WCF服务的方法介绍

推荐信息