当前位置:小鱼儿玄机二站 > 计算机网络 > jQuery实现ajax调用WCF服务的方法,Ajax调用WCF服务详

jQuery实现ajax调用WCF服务的方法,Ajax调用WCF服务详

文章作者:计算机网络 上传时间:2019-09-03

正文实例陈述了jQuery达成ajax调用WCF服务的法子。共享给我们供我们参谋,具体如下:

那二日在写基于WCF服务的后台框架,进程中遭遇了一部分曲折,经过努力全体消除了,在此分享给大家,使用的工具是Visual Studio 二零一一。

关于AJAX调用WCF服务分为跨域和不跨域两种格局,前几日我们先介绍下不跨域下的调用方法。DEMO是在VS二〇〇九写的.

该后台须求协理通过json来传递和接收数据。

透过测验与商讨,开采AJAX调用WCF服必需得满意以下规范

第一,说说搭建进程。

1.wcf的报导方式必需运用webHttpBinding
2.必得设置<endpointBehaviors>节点的值
3.劳务的贯彻必需增多标志

首先步:创制WCF服务应用程序项目WCF。

复制代码 代码如下:

图片 1

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

第二步,创制服务应用的数据类

4.格局前边必需增添如下标识

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,都会被反系列化。

[WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)]

其三步:成立服务合同接口

5.ajax格局中传送的参数名称必需和wcf服务中提供的参数方法名称一致

假若你的劳动只有用来提供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);
  }
}

劳动器端配置文件代码

第四步,创制基于合同接口提供实际服务的类

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

图片 2

劳务器端代码

出于自个儿的劳务须要帮助Ajax,所以选拔“WCF服务(扶助Ajax)”一项,具体代码如下:

[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; } 
  } 
}
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是用来实在管理数量的作业逻辑层,有趣味的同伴们得以自个儿写个大约的落到实处。

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

第五步,创立网页顾客端。

客商端调用代码

在此为了制止管理跨域难点,故把网页post_get_test.html放在WCF项目下。

<%@ 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> 
<!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>

完全实例代码代码点击这里本站下载.rar)。

建议在付出进度中选拔createPerson按键调用情势来写,其能够透过error回调函数来举报实际出错原因,方便调节和测量检验。

企望本文所述对我们jQuery程序设计有所扶助。

第六步,发布WCF服务

您大概感兴趣的篇章:

  • C# 贰个WCF轻易实例
  • 关于.NET/C#/WCF/WPF 塑造IP网络智能录像监察和控制系统的介绍
  • C# WCF轻巧入门图像和文字教程(VS二〇一〇版)
  • C# yield在WCF中的错误用法(一)
  • C# yield在WCF中的错误使用(二)
  • jQuery ajax调用WCF服务实例
  • jQuery Ajax调用WCF服务详细教程
  • jquery调用wcf并呈现出数据的方法
  • WinForm窗体调用WCF服务窗体卡死难题
  • 总结C#动态调用WCF接口的三种办法

右击WCF项目选取“发表”菜单项,在弹出窗口中的下拉列表中选择“新建配置文件”,输入配置文件名称,点击“鲜明”开关后跻身连接装置分界面,如下:

图片 3'

自身是宣布在本机的IIS中,故选取Web Deply发布办法,同时,这里提出服务器和站点名称设置成:localhost和default web site/XXX,这里XXX能够由你自个儿定义个劳务站点的名字(实际正是IIS暗中同意站点的虚构目录名称),那样,你的开垦友人获得到该项目源码后,能发布到一模一样的情况中,制止由于条件的歧异延伸出一文山会海主题材料。

安装甘休后,点击“验证连接”,出现暗蓝的钩钩,表明设置科学,点击“公布”就可以。

第七步,实测

1、今后得以由此浏览器访问来认同劳动器端是不是配备成功,出现如下分界面表明陈设成功。

图片 4

2、通过浏览器访谈测量试验网页来检查职能是还是不是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);在用查看服务器端布署结果时,报:在服务“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、提议首先通过拜望的格局鲜明劳动器端安排成功,再开展客商端和劳务器端联调。

2、若要求代码从客商端运维起来直到劳动器端运转进行联调,则必需使用同步调用,因而,使用jQuery的ajax时,必需将async设置为false。

你可能感兴趣的篇章:

  • C# 多少个WCF轻便实例
  • 关于.NET/C#/WCF/WPF 塑造IP互连网智能录制监察和控制种类的牵线
  • C# WCF轻松入门图像和文字化教育程(VS二零一零版)
  • C# yield在WCF中的错误用法(一)
  • C# yield在WCF中的错误选拔(二)
  • jQuery ajax调用WCF服务实例
  • jquery调用wcf并显示出数据的点子
  • WinForm窗体调用WCF服务窗体卡死难题
  • jQuery完成ajax调用WCF服务的艺术(附带demo下载)
  • 总结C#动态调用WCF接口的三种办法

本文由小鱼儿玄机二站发布于计算机网络,转载请注明出处:jQuery实现ajax调用WCF服务的方法,Ajax调用WCF服务详

关键词: