快捷導(dǎo)航

jQuery Ajax調(diào)用WCF服務(wù)詳細(xì)教程

更新時(shí)間：2015年03月31日 09:55:18 投稿：junjie

這篇文章主要介紹了jQuery Ajax調(diào)用WCF服務(wù)詳細(xì)教程,本文講解了從WFC編程到JQUERY調(diào)用的詳細(xì)步驟,并總結(jié)了使用中遇到的問(wèn)題和解決方法,需要的朋友可以參考下

這兩天在寫(xiě)基于WCF服務(wù)的后臺(tái)框架，過(guò)程中遇到了一些挫折，經(jīng)過(guò)努力全部解決了，在此分享給大家，使用的工具是Visual Studio 2013。

該后臺(tái)需要支持通過(guò)json來(lái)傳遞和接收數(shù)據(jù)。

首先，說(shuō)說(shuō)搭建過(guò)程。

第一步：創(chuàng)建WCF服務(wù)應(yīng)用程序項(xiàng)目WCF。

第二步，創(chuàng)建服務(wù)使用的數(shù)據(jù)類(lèi)

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來(lái)與數(shù)據(jù)庫(kù)交互，所以使用了Table、StringLength、DataType。若你未使用EF，可以不加這些。DataContract是用來(lái)標(biāo)志當(dāng)前類(lèi)在序列化時(shí)需要參考DataMember屬性，若不設(shè)DataContract或僅設(shè)置DataMember，則所有共有屬性和字段全部序列化，否則，只對(duì)設(shè)置有DataMember的序列化。注意，DataContract和DataMember與反序列化無(wú)關(guān)，也就是說(shuō)，當(dāng)把一個(gè)json對(duì)象字符串傳遞給WCF服務(wù)時(shí)，不管該字段上是否有DataMember，都會(huì)被反序列化。

第三步：創(chuàng)建服務(wù)契約接口

如果你的服務(wù)僅僅用來(lái)提供Ajax等一些非WCF客戶(hù)端訪(fǎng)問(wèn)的，那么是不需要接口的，把接口定義中的各種Attribute直接加在服務(wù)提供的類(lèi)的定義上即可。但是為了能讓程序可以通過(guò)服務(wù)接口來(lái)訪(fǎng)問(wèn)，那么必須使用接口，例如：前端MVC+后臺(tái)WCF的架構(gòu)形式。

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

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

第四步，創(chuàng)建基于契約接口提供實(shí)際服務(wù)的類(lèi)

由于我的服務(wù)需要支持Ajax，所以選擇“WCF服務(wù)（支持Ajax）”一項(xiàng)，具體代碼如下：

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是用來(lái)實(shí)際處理數(shù)據(jù)的業(yè)務(wù)邏輯層，有興趣的伙伴們可以自己寫(xiě)個(gè)簡(jiǎn)單的實(shí)現(xiàn)。

第五步，創(chuàng)建網(wǎng)頁(yè)客戶(hù)端。

在此為了避免處理跨域問(wèn)題，故把網(wǎng)頁(yè)post_get_test.html放在WCF項(xiàng)目下。

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

建議在開(kāi)發(fā)過(guò)程中采納createPerson按鈕調(diào)用方式來(lái)寫(xiě)，其可以通過(guò)error回調(diào)函數(shù)來(lái)反饋實(shí)際出錯(cuò)原因，方便調(diào)試。

第六步，發(fā)布WCF服務(wù)

右擊WCF項(xiàng)目選擇“發(fā)布”菜單項(xiàng)，在彈出窗口中的下拉列表中選擇“新建配置文件”，輸入配置文件名稱(chēng)，點(diǎn)擊“確定”按鈕后進(jìn)入連接設(shè)置界面，如下：

'

我是發(fā)布在本機(jī)的IIS中，故選擇Web Deply發(fā)布方法，同時(shí)，這里建議服務(wù)器和站點(diǎn)名稱(chēng)設(shè)置成：localhost和default web site/XXX，這里XXX可以由你自己定義個(gè)服務(wù)站點(diǎn)的名字（實(shí)際就是IIS默認(rèn)站點(diǎn)的虛擬目錄名稱(chēng)），這樣，你的開(kāi)發(fā)伙伴獲取到該項(xiàng)目源碼后，能發(fā)布到完全相同的環(huán)境中，避免由于環(huán)境的差異延伸出一系列問(wèn)題。

設(shè)置完畢后，點(diǎn)擊“驗(yàn)證連接”，出現(xiàn)綠色的鉤鉤，說(shuō)明設(shè)置正確，點(diǎn)擊“發(fā)布”即可。

第七步，實(shí)測(cè)

1、現(xiàn)在可以通過(guò)瀏覽器訪(fǎng)問(wèn)http://localhost/wcf/personservice.svc來(lái)確認(rèn)服務(wù)器端是否部署成功，出現(xiàn)如下界面說(shuō)明部署成功。

2、通過(guò)瀏覽器訪(fǎng)問(wèn)測(cè)試網(wǎng)頁(yè)http://localhost/wcf/post_get_test.html來(lái)檢查功能是否OK。

其次，下面說(shuō)說(shuō)我在搭建過(guò)程中出現(xiàn)的各種問(wèn)題。

1、網(wǎng)頁(yè)通過(guò)Ajax調(diào)用服務(wù)的CreatePerson方法時(shí)把方法類(lèi)型寫(xiě)錯(cuò)了，POST寫(xiě)成了GET，結(jié)果系統(tǒng)報(bào)：405 (Method Not Allowed)。另外，根據(jù)微軟官網(wǎng)中描述，若通過(guò)soap訪(fǎng)問(wèn)一個(gè)WCF WEB HTTP應(yīng)用程序（使用 WebHttpBinding 和 WebHttpBehavior 的服務(wù)）也會(huì)出現(xiàn)405錯(cuò)誤。

2、web.config文件中endpoint節(jié)點(diǎn)的contract屬性配置錯(cuò)誤，沒(méi)有指向WCF.IPersonService，網(wǎng)頁(yè)執(zhí)行時(shí)報(bào)：500 (System.ServiceModel.ServiceActivationException)；在用http://localhost/wcf/personservice.svc檢驗(yàn)服務(wù)器端部署結(jié)果時(shí)，報(bào)：在服務(wù)“PersonService”實(shí)現(xiàn)的協(xié)定列表中找不到協(xié)定名稱(chēng)“VME.Contract.PersonService”。

這里需要說(shuō)明的是若你的服務(wù)不是基于接口的，則endpoint的contract直接指向服務(wù)類(lèi)即可。

3、在使用jQuery的ajax并以POST方式傳值給服務(wù)器時(shí)，由于格式錯(cuò)誤，報(bào)如下錯(cuò)誤：500 (Internal Server Error)，詳細(xì)信息為：格式化程序嘗試對(duì)消息進(jìn)行反序列化時(shí)引發(fā)異常。正確的有兩種處理方式：

1）以json格式對(duì)象的方式傳遞，例如：

復(fù)制代碼代碼如下:

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

這里要強(qiáng)調(diào)的是鍵值對(duì)中，鍵必須加雙引號(hào)，且大小寫(xiě)必須與服務(wù)方法中的形參定義完全一樣。
2）以json格式對(duì)象字符串的形式傳遞，具體如下：

POST方式傳值

A）傳入非對(duì)象參數(shù)：

復(fù)制代碼代碼如下:

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

這里要強(qiáng)調(diào)的是鍵值對(duì)中，鍵必須加雙引號(hào)，且大小寫(xiě)必須與服務(wù)方法中的形參定義完全一樣，值應(yīng)按如下規(guī)則設(shè)置：字符串加雙引號(hào)。
B）傳入對(duì)象參數(shù)：

復(fù)制代碼代碼如下:

var person = {};

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

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

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

這里要強(qiáng)調(diào)的是對(duì)象屬性名稱(chēng)的大小寫(xiě)必須與數(shù)據(jù)類(lèi)的屬性定義完全一致。

GET方式傳值

A）傳入非對(duì)象參數(shù)：

復(fù)制代碼代碼如下:

'loginname="name"'

B）傳入對(duì)象參數(shù)：

復(fù)制代碼代碼如下:

var person = {};

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

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

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

最后，說(shuō)說(shuō)WCF調(diào)試。

1、建議首先通過(guò)訪(fǎng)問(wèn)http://localhost/wcf/personservice.svc的形式確認(rèn)服務(wù)器端部署成功，再進(jìn)行客戶(hù)端和服務(wù)器端聯(lián)調(diào)。

2、若需要代碼從客戶(hù)端運(yùn)行開(kāi)始直到服務(wù)器端運(yùn)行進(jìn)行聯(lián)調(diào)，則必須使用同步調(diào)用，因此，使用jQuery的ajax時(shí)，必須將async設(shè)置為false。

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線(xiàn)工具

數(shù)據(jù)庫(kù)

CMS

常用工具

jQuery Ajax調(diào)用WCF服務(wù)詳細(xì)教程

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具