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 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
js实现倒计时关键代码
May 05 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
uni-app之APP和小程序微信授权方法
May 09 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
Thinkphp中的volist标签用法简介
2014/06/18 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
jsonp原理及使用
2013/10/28 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
Python检测网站链接是否已存在
2016/04/07 Python
Python分析学校四六级过关情况
2017/11/22 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
通过实例了解python property属性
2019/11/01 Python
Pygame框架实现飞机大战
2020/08/07 Python
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
《在山的那边》教学反思
2014/02/23 职场文书
创建文明学校实施方案
2014/03/11 职场文书
开展创先争优活动总结
2014/08/28 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
班主任寄语2016
2015/12/04 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
Python+Appium新手教程
2021/04/17 Python
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫