jQuery实现ajax调用WCF服务的方法(附带demo下载)


Posted in Javascript onDecember 04, 2015

本文实例讲述了jQuery实现ajax调用WCF服务的方法。分享给大家供大家参考,具体如下:

关于AJAX调用WCF服务分为跨域和不跨域两种方式,今天咱们先介绍下不跨域下的调用方法。DEMO是在VS2008写的.

经过测试与研究,发现AJAX调用WCF服务必须满足以下条件

1.wcf的通讯方式必须使用webHttpBinding
2.必须设置<endpointBehaviors>节点的值
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"> 
    <!-- Service Endpoints --> 
  <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"> 
     <!-- 为避免泄漏元数据信息,请在部署前将以下值设置为 false 并删除上面的元数据终结点--> 
     <serviceMetadata httpGetEnabled="true"/> 
     <!-- 要接收故障异常详细信息以进行调试,请将以下值设置为 true。在部署前设置为 false 以避免泄漏异常信息--> 
     <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"> 
 <div> 
  <input id="Button1" type="button" value="调用1" onclick="fn1();" /></div> 
  <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程序设计有所帮助。

Javascript 相关文章推荐
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 #Javascript
jQuery中cookie插件用法实例分析
Dec 04 #Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 #Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 #Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 #Javascript
给before和after伪元素设置js效果的方法
Dec 04 #Javascript
全面解析Bootstrap手风琴效果
Apr 17 #Javascript
You might like
php 运行效率总结(提示程序速度)
2009/11/26 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
Python采用raw_input读取输入值的方法
2014/08/18 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
简单介绍django提供的加密算法
2019/12/18 Python
携程英文网站:Trip.com
2017/02/07 全球购物
新书吧创业计划书
2014/01/31 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
教务处教学工作总结
2015/08/10 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
python for循环赋值问题
2021/06/03 Python
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js