首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery Ajax调用WCF服务详细教程

Posted in Javascript onMarch 31, 2015

这两天在写基于WCF服务的后台框架，过程中遇到了一些挫折，经过努力全部解决了，在此分享给大家，使用的工具是Visual Studio 2013。

该后台需要支持通过json来传递和接收数据。

首先，说说搭建过程。

第一步：创建WCF服务应用程序项目WCF。

jQuery Ajax调用WCF服务详细教程

第二步，创建服务使用的数据类

using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Runtime.Serialization;

namespace WCF
{
  [DataContract]
  [Table("TUser")]
  public class Person
  {
    [DataMember]
    public int ID { get; set; }

    [DataMember]
    [StringLength(100)]
    public string LoginName { get; set; }

    [DataMember]
    [StringLength(100)]
    public string Password { get; set; }

    [DataMember]
    [DataType(DataType.Date)]
    public DateTime CreateDate { get; set; }
  }
}

这里，由于我使用EF来与数据库交互，所以使用了Table、StringLength、DataType。若你未使用EF，可以不加这些。DataContract是用来标志当前类在序列化时需要参考DataMember属性，若不设DataContract或仅设置DataMember，则所有共有属性和字段全部序列化，否则，只对设置有DataMember的序列化。注意，DataContract和DataMember与反序列化无关，也就是说，当把一个json对象字符串传递给WCF服务时，不管该字段上是否有DataMember，都会被反序列化。

第三步：创建服务契约接口

如果你的服务仅仅用来提供Ajax等一些非WCF客户端访问的，那么是不需要接口的，把接口定义中的各种Attribute直接加在服务提供的类的定义上即可。但是为了能让程序可以通过服务接口来访问，那么必须使用接口，例如：前端MVC+后台WCF的架构形式。

using System.Collections.Generic;
using System.ServiceModel;
using System.ServiceModel.Web;

namespace WCF
{
  [ServiceContract]
  public interface IPersonService
  {
    [OperationContract]
    [WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)]
    Person CreatePerson(string loginName, string password);

    //服务功能2
    [OperationContract]
    [WebGet(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)]
    bool CheckMan(string loginName);
  }
}

第四步，创建基于契约接口提供实际服务的类

jQuery Ajax调用WCF服务详细教程

由于我的服务需要支持Ajax，所以选择“WCF服务（支持Ajax）”一项，具体代码如下：

using System;
using System.Collections.Generic;
using System.ServiceModel.Activation;

namespace WCF
{
  [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
  public class PersonService : IPersonService
  {
    public Person CreatePerson(string loginName, string password)
    {
      return new PersonBLL().CreatePerson(loginName,password);
    }

    public bool CheckMan(string loginName)
    {
      return new PersonBLL().CheckMan(loginName);
    }
  }
}

上述的PersonBLL是用来实际处理数据的业务逻辑层，有兴趣的伙伴们可以自己写个简单的实现。

第五步，创建网页客户端。

在此为了避免处理跨域问题，故把网页post_get_test.html放在WCF项目下。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="jquery-1.10.2.js"></script>
  <script type="text/javascript" src="jqueryjson.js"></script>
  <title></title>
</head>
<body>
  <p>
    <input id="createPerson" type="button" value="POST_CreatePerson" /><br>
    <input id="checkMan" type="button" value="GET_CheckMan" /><br>

    <input type="text" id="loginName" />
    <input type="text" id="password" />
  </p>
  <script type="text/javascript">
    $(document).ready(function () {
      $('#createPerson').click(function () {
        $.ajax({
          type: "post",
          url: "personservice.svc/CreatePerson",
          data: '{"loginName":"' + $("#loginName").val() + '","password":"' + $("#password").val() + '"}',
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (data) {
            alert("ID:" + data.d.ID + " Name:" + data.d.LoginName + " Password:" + data.d.Password + " CreateDate:" + data.d.CreateDate);
          },
          error: function (xhr) {
            alert(xhr.responseText);
          }
        });
      });

      $('#checkMan').click(function () {
        $.getJSON("PersonService.svc/CheckMan", 'loginname="' + $("#loginName").val() + '"',
          function (data) {
            alert(data.d);
          });
      });
    });
  </script>
</body>
</html>

建议在开发过程中采纳createPerson按钮调用方式来写，其可以通过error回调函数来反馈实际出错原因，方便调试。

第六步，发布WCF服务

右击WCF项目选择“发布”菜单项，在弹出窗口中的下拉列表中选择“新建配置文件”，输入配置文件名称，点击“确定”按钮后进入连接设置界面，如下：

jQuery Ajax调用WCF服务详细教程'

我是发布在本机的IIS中，故选择Web Deply发布方法，同时，这里建议服务器和站点名称设置成：localhost和default web site/XXX，这里XXX可以由你自己定义个服务站点的名字（实际就是IIS默认站点的虚拟目录名称），这样，你的开发伙伴获取到该项目源码后，能发布到完全相同的环境中，避免由于环境的差异延伸出一系列问题。

设置完毕后，点击“验证连接”，出现绿色的钩钩，说明设置正确，点击“发布”即可。

第七步，实测

1、现在可以通过浏览器访问http://localhost/wcf/personservice.svc来确认服务器端是否部署成功，出现如下界面说明部署成功。

jQuery Ajax调用WCF服务详细教程

2、通过浏览器访问测试网页http://localhost/wcf/post_get_test.html来检查功能是否OK。

其次，下面说说我在搭建过程中出现的各种问题。

1、网页通过Ajax调用服务的CreatePerson方法时把方法类型写错了，POST写成了GET，结果系统报：405 (Method Not Allowed)。另外，根据微软官网中描述，若通过soap访问一个WCF WEB HTTP应用程序（使用 WebHttpBinding 和 WebHttpBehavior 的服务）也会出现405错误。

2、web.config文件中endpoint节点的contract属性配置错误，没有指向WCF.IPersonService，网页执行时报：500 (System.ServiceModel.ServiceActivationException)；在用http://localhost/wcf/personservice.svc检验服务器端部署结果时，报：在服务“PersonService”实现的协定列表中找不到协定名称“VME.Contract.PersonService”。

这里需要说明的是若你的服务不是基于接口的，则endpoint的contract直接指向服务类即可。

3、在使用jQuery的ajax并以POST方式传值给服务器时，由于格式错误，报如下错误：500 (Internal Server Error)，详细信息为：格式化程序尝试对消息进行反序列化时引发异常。正确的有两种处理方式：

1）以json格式对象的方式传递，例如：

{"loginName":"name","password":"pwd"}

这里要强调的是键值对中，键必须加双引号，且大小写必须与服务方法中的形参定义完全一样。
2）以json格式对象字符串的形式传递，具体如下：

POST方式传值

A）传入非对象参数：

{"loginName":"name","password":"pwd"}'

这里要强调的是键值对中，键必须加双引号，且大小写必须与服务方法中的形参定义完全一样，值应按如下规则设置：字符串加双引号。
B）传入对象参数：

var person = {};

person.LoginName = $("#loginName").val();

person.Password = $("#password").val();

var jsonPerson = '{"person":' + $.toJSON(person) + '}';

这里要强调的是对象属性名称的大小写必须与数据类的属性定义完全一致。

GET方式传值

A）传入非对象参数：

'loginname="name"'

B）传入对象参数：

var person = {};

person.LoginName = $("#loginName").val();

person.Password = $("#password").val();

var jsonPerson = 'person=' + $.toJSON(person);

最后，说说WCF调试。

1、建议首先通过访问http://localhost/wcf/personservice.svc的形式确认服务器端部署成功，再进行客户端和服务器端联调。

2、若需要代码从客户端运行开始直到服务器端运行进行联调，则必须使用同步调用，因此，使用jQuery的ajax时，必须将async设置为false。

jQuery Ajax调用WCF服务详细教程

- Author -

junjie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
jquery实现网页定位导航
Aug 23 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
js实现炫酷光感效果
Sep 05 Javascript
JavaScript父子窗体间的调用方法
Mar 31 #Javascript
JavaScript操作cookie类实例
Mar 31 #Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 #Javascript
javascript制作2048游戏
Mar 30 #Javascript
JavaScript模拟实现继承的方法
Mar 30 #Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 #Javascript
JS实现向表格中动态添加行的方法
Mar 30 #Javascript
临时表(1) 批处理(1) GTID(1) 排序失效(1) 重复数据(2) timestamp(1) T-SQL(1) 游标(1) 表变量(1) ip连接(1)
You might like
php的一个简单加密解密代码
2014/01/14 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
js获取当前select 元素值的代码
2010/04/19 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
对Python信号处理模块signal详解
2019/01/09 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
python动态进度条的实现代码
2019/07/03 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
pytorch中的inference使用实例
2020/02/20 Python
使用Django清空数据库并重新生成
2020/04/03 Python
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
大学生未来职业生涯规划书
2014/02/15 职场文书
房地产促销活动方案
2014/03/01 职场文书
元旦联欢会主持词
2014/03/26 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
市级文明单位申报材料
2014/05/07 职场文书
开学典礼演讲稿
2014/05/23 职场文书
2014公司年终工作总结
2014/12/19 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书