【jquery ajax】Jquery Ajax访问WCF服务和跨域访问WCF

时间:2017-07-11  来源:WCF  阅读:
 代码如下

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
     {
        ///


        /// 添加订单
        ///

        /// 订单号
        ///
        [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()
        {
        }
        ///
        /// 添加订单
        ///

        /// 订单号
        ///
        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程序也可以通过生成此服务的代理来调用. 以下是配置文件信息

 代码如下

 
  
 

 
 
 
  
   
    
     
     
     
    

   

   
    
     
    

   

  

  
   
    
    
   

  

  
   
    
    

   

  

  
   
    
   

  

 

 
  
 

第三点注意:

 代码如下
    
    
   

这里配置了两上终结点,第一个终结点的配置给jquery ajax以web的形式调用该服务,指定该终结点的绑定为webHttpBinding,我们看下behaviorConfiguration的配置,

behaviorConfiguration="webBehavior",如下图配置, 配置指定允许web脚本访问。

 代码如下
       
         
         
         
       


接下来我们再看下bindingConfiguration的配置,bindingConfiguration="webBinding",详细配置如下图,crossDomainScriptAccessEnabled指定脚本可以跨域访问.

 代码如下
       
       


第二个终结点的配置提供给asp.net通过服务代理的方式调用.

 

最后就是客户端调用(注:GET方式在各浏览器下都正常,POST方式只有在IE下能通过,其它浏览器因为安全原因拒绝跨域POST提交)

 代码如下





   
   
    <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>


   


        修改单个产品
   


   


        Wcf Service Url:             value="http://127.0.0.1:90/AspNavService/web/AddOrderForNAV?jsoncallback=?" />
   


   


        Order Id:
       

       
   



【jquery ajax】Jquery Ajax访问WCF服务和跨域访问WCF

http://m.bbyears.com/asp/34024.html

推荐访问:jquery获取select选中的值
相关阅读 猜你喜欢
本类排行 本类最新