| 代码如下 | 复制代码 |
|
using jquery ajax call wcf service get/post/put/delete http://www.codeproject.com/Articles/254714/Implement-CRUD-operations-using-RESTful-WCF-Servic Using POST Method Retrieve a representation of the addressed member of the collection, in the example below, create a new entry in the collection. Collapse | Copy Code $.ajax({ type: "POST", url: "Services/EFService.svc/Members/", data: "{Email:'test@test.com', ScreenName:'TestUser'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { // Play with response returned in JSON format }, error: function (msg) { alert(msg); } }); Using PUT Method Update the entire collection with another collection, in the example below, update the addressed member of the collection. Collapse | Copy Code $.ajax({ type: "PUT", url: "Services/EFService.svc/Members/", data: "{Email:'test@test.com', ScreenName:'TestUser'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { // Play with response returned in JSON format }, error: function (msg) { alert(msg); } });Using DELETE Method Delete the entire collection or a specific collection, in the example below, delete Member with id=1. Collapse | Copy Code $.ajax({ type: "DELETE", url: "Services/EFService.svc/Members(1)", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { // Play with response returned in JSON format }, error: function (msg) { alert(msg); } }); |
|
jQuery ajax跨域调用WCF服务
以下是契约层接口:
| 代码如下 | 复制代码 |
|
namespace Valor.ValorCom.Contracts { [ServiceContract(Name = "NAVService", Namespace = "www.valorcomm.com")] public interface INAVService { /// <summary> /// 添加订单 /// </summary> /// <param name="orderId">订单号</param> /// <returns></returns> [WebInvoke(Method = "GET", BodyStyle = WebMessageBodyStyle.WrappedRequest, ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json)] string AddOrderForNAV(int orderId); } } |
|
第一点要注意的:指定服务可以通过GET方式调用,设置请求和响应的格式都是JSON.
以下是服务类:
| 代码如下 | 复制代码 |
| namespace Valor.ValorCom.Services { [AspNetCompatibilityRequirements( RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] [JavascriptCallbackBehavior(UrlParameterName = "jsoncallback")] public class NAVService : INAVService { public NAVService() { } /// <summary> /// 添加订单 /// </summary> /// <param name="orderId">订单号</param> /// <returns></returns> public string AddOrderForNAV(int orderId) { string result = ""; if (Common.TurnNav()) { //添加订单相关代码 } else { result = "未开启与NAV系统同步订单的接口"; } return result; } } } |
|
第二点要注意的，一定要加上[JavascriptCallbackBehavior(UrlParameterName = "jsoncallback")]，为javascript回调使用,UrlParameterName 设置用于跨域脚本访问的 URL 查询字符串参数名称。[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 用于asp.net管道兼容，这样的话此服务可以通过jquery ajax跨域调用，asp.net程序也可以通过生成此服务的代理来调用. 以下是配置文件信息
| 代码如下 | 复制代码 |
| <?xml version="1.0"?> <configuration> <system.web> <compilation debug="true"/> </system.web> <appSettings> </appSettings> <system.serviceModel> <behaviors> <endpointBehaviors> <behavior name="webBehavior"> <!--这里必须设置--> <!--<webHttp />--> <enableWebScript /> </behavior> </endpointBehaviors> <serviceBehaviors> <behavior name="navMetadataBehavior"> <serviceMetadata httpGetEnabled="true" httpGetUrl="http://wcf.9valor.com/NAVService.svc/metadata"/> </behavior> </serviceBehaviors> </behaviors> <services> <service behaviorConfiguration="navMetadataBehavior" name="Valor.ValorCom.Services.NAVService"> <endpoint binding="webHttpBinding" address="http://127.0.0.1:90/NAVService/web" behaviorConfiguration="webBehavior" bindingConfiguration="webBinding" contract="Valor.ValorCom.Contracts.INAVService" /> <endpoint address="http://127.0.0.1:90/NAVService" binding="basicHttpBinding" contract="Valor.ValorCom.Contracts.INAVService"></endpoint> </service> </services> <bindings> <webHttpBinding> <binding name="webBinding" crossDomainScriptAccessEnabled="true"> </binding> </webHttpBinding> </bindings> <serviceHostingEnvironment multipleSiteBindingsEnabled="true" aspNetCompatibilityEnabled="true"> <baseAddressPrefixFilters> <add prefix="string"/> </baseAddressPrefixFilters> </serviceHostingEnvironment> </system.serviceModel> <startup> <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.0"/> </startup> </configuration> |
|
第三点注意:
| 代码如下 | 复制代码 |
| <service behaviorConfiguration="navMetadataBehavior" name="Valor.ValorCom.Services.NAVService"> <endpoint binding="webHttpBinding" address="http://www.111cn.net/n96/ NAVService/web" behaviorConfiguration="webBehavior" bindingConfiguration="webBinding" contract="Valor.ValorCom.Contracts.INAVService" /> <endpoint address="http://127.0.0.1:90/NAVService" binding="basicHttpBinding" contract="Valor.ValorCom.Contracts.INAVService"></endpoint> </service> |
|
这里配置了两上终结点,第一个终结点的配置给jquery ajax以web的形式调用该服务,指定该终结点的绑定为webHttpBinding,我们看下behaviorConfiguration的配置,
behaviorConfiguration="webBehavior",如下图配置,<enableWebScript /> 配置指定允许web脚本访问。
| 代码如下 | 复制代码 |
| <endpointBehaviors> <behavior name="webBehavior"> <!--这里必须设置--> <!--<webHttp />--> <enableWebScript /> </behavior> </endpointBehaviors> |
|
接下来我们再看下bindingConfiguration的配置,bindingConfiguration="webBinding",详细配置如下图,crossDomainScriptAccessEnabled指定脚本可以跨域访问.
| 代码如下 | 复制代码 |
| <webHttpBinding> <binding name="webBinding" crossDomainScriptAccessEnabled="true"> </binding> </webHttpBinding> |
|
第二个终结点的配置提供给asp.net通过服务代理的方式调用.
最后就是客户端调用(注:GET方式在各浏览器下都正常,POST方式只有在IE下能通过，其它浏览器因为安全原因拒绝跨域POST提交)
| 代码如下 | 复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript"> $(function () { $("#btnExcute").click(function () { var url = $("#txtServiceUrl").val(); url += "&orderId="+$("#txtOrderId").val(); $.ajax({ type: "get", dataType: "json", url: url, success: function (returndata) { alert(returndata); } }); }); }); </script> </head> <body> <h2> 修改单个产品 </h2> <p> Wcf Service Url:<input type="text" style="width: 700px;" id="txtServiceUrl" name="txtServiceUrl" value="http://127.0.0.1:90/AspNavService/web/AddOrderForNAV?jsoncallback=?" /> </p> <p> Order Id:<input type="text" id="txtOrderId" name="txtOrderId" value="11665369" /> <br /> <input type="button" id="btnExcute" name="btnExcute" value="修改" /> </p> </body> </html> |
|
时间： 2024-10-25 23:37:44