jQuery Ajax調(diào)用WCF服務(wù)詳細(xì)教程
這兩天在寫基于WCF服務(wù)的后臺框架，過程中遇到了一些挫折，經(jīng)過努力全部解決了，在此分享給大家，使用的工具是Visual Studio 2013。
該后臺需要支持通過json來傳遞和接收數(shù)據(jù)。
首先，說說搭建過程。
第一步：創(chuàng)建WCF服務(wù)應(yīng)用程序項(xiàng)目WCF。
第二步，創(chuàng)建服務(wù)使用的數(shù)據(jù)類
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來與數(shù)據(jù)庫交互，所以使用了Table、StringLength、DataType。若你未使用EF，可以不加這些。DataContract是用來標(biāo)志當(dāng)前類在序列化時需要參考DataMember屬性，若不設(shè)DataContract或僅設(shè)置DataMember，則所有共有屬性和字段全部序列化，否則，只對設(shè)置有DataMember的序列化。注意，DataContract和DataMember與反序列化無關(guān)，也就是說，當(dāng)把一個json對象字符串傳遞給WCF服務(wù)時，不管該字段上是否有DataMember，都會被反序列化。
第三步：創(chuàng)建服務(wù)契約接口
如果你的服務(wù)僅僅用來提供Ajax等一些非WCF客戶端訪問的，那么是不需要接口的，把接口定義中的各種Attribute直接加在服務(wù)提供的類的定義上即可。但是為了能讓程序可以通過服務(wù)接口來訪問，那么必須使用接口，例如：前端MVC+后臺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ù)的類
由于我的服務(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是用來實(shí)際處理數(shù)據(jù)的業(yè)務(wù)邏輯層，有興趣的伙伴們可以自己寫個簡單的實(shí)現(xiàn)。
第五步，創(chuàng)建網(wǎng)頁客戶端。
在此為了避免處理跨域問題，故把網(wǎng)頁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>
建議在開發(fā)過程中采納createPerson按鈕調(diào)用方式來寫，其可以通過error回調(diào)函數(shù)來反饋實(shí)際出錯原因，方便調(diào)試。
第六步，發(fā)布WCF服務(wù)
右擊WCF項(xiàng)目選擇“發(fā)布”菜單項(xiàng)，在彈出窗口中的下拉列表中選擇“新建配置文件”，輸入配置文件名稱，點(diǎn)擊“確定”按鈕后進(jìn)入連接設(shè)置界面，如下：
'
我是發(fā)布在本機(jī)的IIS中，故選擇Web Deply發(fā)布方法，同時，這里建議服務(wù)器和站點(diǎn)名稱設(shè)置成：localhost和default web site/XXX，這里XXX可以由你自己定義個服務(wù)站點(diǎn)的名字（實(shí)際就是IIS默認(rèn)站點(diǎn)的虛擬目錄名稱），這樣，你的開發(fā)伙伴獲取到該項(xiàng)目源碼后，能發(fā)布到完全相同的環(huán)境中，避免由于環(huán)境的差異延伸出一系列問題。
設(shè)置完畢后，點(diǎn)擊“驗(yàn)證連接”，出現(xiàn)綠色的鉤鉤，說明設(shè)置正確，點(diǎn)擊“發(fā)布”即可。
第七步，實(shí)測
1、現(xiàn)在可以通過瀏覽器訪問http://localhost/wcf/personservice.svc來確認(rèn)服務(wù)器端是否部署成功，出現(xiàn)如下界面說明部署成功。
2、通過瀏覽器訪問測試網(wǎng)頁http://localhost/wcf/post_get_test.html來檢查功能是否OK。
其次，下面說說我在搭建過程中出現(xiàn)的各種問題。
1、網(wǎng)頁通過Ajax調(diào)用服務(wù)的CreatePerson方法時把方法類型寫錯了，POST寫成了GET，結(jié)果系統(tǒng)報：405 (Method Not Allowed)。另外，根據(jù)微軟官網(wǎng)中描述，若通過soap訪問一個WCF WEB HTTP應(yīng)用程序（使用 WebHttpBinding 和 WebHttpBehavior 的服務(wù)）也會出現(xiàn)405錯誤。
2、web.config文件中endpoint節(jié)點(diǎn)的contract屬性配置錯誤，沒有指向WCF.IPersonService，網(wǎng)頁執(zhí)行時報：500 (System.ServiceModel.ServiceActivationException)；在用http://localhost/wcf/personservice.svc檢驗(yàn)服務(wù)器端部署結(jié)果時，報：在服務(wù)“PersonService”實(shí)現(xiàn)的協(xié)定列表中找不到協(xié)定名稱“VME.Contract.PersonService”。
這里需要說明的是若你的服務(wù)不是基于接口的，則endpoint的contract直接指向服務(wù)類即可。
3、在使用jQuery的ajax并以POST方式傳值給服務(wù)器時，由于格式錯誤，報如下錯誤：500 (Internal Server Error)，詳細(xì)信息為：格式化程序嘗試對消息進(jìn)行反序列化時引發(fā)異常。正確的有兩種處理方式：
1）以json格式對象的方式傳遞，例如：
{"loginName":"name","password":"pwd"}
這里要強(qiáng)調(diào)的是鍵值對中，鍵必須加雙引號，且大小寫必須與服務(wù)方法中的形參定義完全一樣。
2）以json格式對象字符串的形式傳遞，具體如下：
POST方式傳值
A）傳入非對象參數(shù)：
{"loginName":"name","password":"pwd"}'
這里要強(qiáng)調(diào)的是鍵值對中，鍵必須加雙引號，且大小寫必須與服務(wù)方法中的形參定義完全一樣，值應(yīng)按如下規(guī)則設(shè)置：字符串加雙引號。
B）傳入對象參數(shù)：
var person = {};
person.LoginName = $("#loginName").val();
person.Password = $("#password").val();
var jsonPerson = '{"person":' + $.toJSON(person) + '}';
這里要強(qiáng)調(diào)的是對象屬性名稱的大小寫必須與數(shù)據(jù)類的屬性定義完全一致。
GET方式傳值
A）傳入非對象參數(shù)：
'loginname="name"'
B）傳入對象參數(shù)：
var person = {};
person.LoginName = $("#loginName").val();
person.Password = $("#password").val();
var jsonPerson = 'person=' + $.toJSON(person);
最后，說說WCF調(diào)試。
1、建議首先通過訪問http://localhost/wcf/personservice.svc的形式確認(rèn)服務(wù)器端部署成功，再進(jìn)行客戶端和服務(wù)器端聯(lián)調(diào)。
2、若需要代碼從客戶端運(yùn)行開始直到服務(wù)器端運(yùn)行進(jìn)行聯(lián)調(diào)，則必須使用同步調(diào)用，因此，使用jQuery的ajax時，必須將async設(shè)置為false。
- jquery中ajax調(diào)用json數(shù)據(jù)的使用說明
- JQuery與Ajax調(diào)用新浪API獲取短網(wǎng)址的代碼
- Jquery + Ajax調(diào)用webService實(shí)例代碼(asp.net)
- jQuery ajax調(diào)用后臺aspx后臺文件的兩種常見方法(不是ashx)
- jQuery ajax調(diào)用webservice注意事項(xiàng)
- jQuery ajax+PHP實(shí)現(xiàn)的級聯(lián)下拉列表框功能示例
- JQuery打造PHP的AJAX表單提交實(shí)例
- php+ajax+jquery實(shí)現(xiàn)點(diǎn)擊加載更多內(nèi)容
- jquery與php結(jié)合實(shí)現(xiàn)AJAX長輪詢(LongPoll)
- jQuery實(shí)現(xiàn)簡單的Ajax調(diào)用功能示例
相關(guān)文章
在網(wǎng)頁開發(fā)中，經(jīng)常會需要不斷的刷新某個頁面或某個局部數(shù)據(jù)。這時候就需要用到定時刷新來實(shí)現(xiàn)了。接下來通過本文給大家分享jquery實(shí)現(xiàn)定時刷新功能，需要的朋友參考下吧2017-05-05
$.ajax返回的JSON無法執(zhí)行success的解決方法
為什么會這樣子呢？在網(wǎng)上查了好久，結(jié)果發(fā)現(xiàn)是因?yàn)槲抑付薲ataType:'json',這樣一指定完蛋了，對Json的要求就非常嚴(yán)格起來了2011-09-09
在逛博客中無意中看到這個插件，一下就吸引住了我，于是就自己在網(wǎng)上找了些資料實(shí)踐了一下2011-08-08
Jquery全選與反選點(diǎn)擊執(zhí)行一次的解決方案
在做項(xiàng)目時遇到一個bug，checkbox全選與反選功能，只能點(diǎn)擊一次，再點(diǎn)就不起作用了，為了解決此問題，我查找了好多資料，下面把具體解決方案整理分享給大家，需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JQuery擴(kuò)展對象方法操作,結(jié)合實(shí)例形式簡單分析了jQuery使用$.fn.extend方法擴(kuò)展對象方法的相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
jquery對標(biāo)簽添加只讀（readonly）或者禁用（disabled）屬性
這篇文章主要介紹了jquery對標(biāo)簽添加只讀（readonly）或者禁用（disabled）屬性，jQuery是一個JavaScript庫。極大地簡化了JavaScript編程，下面關(guān)于其詳細(xì)介紹，需要的小伙伴可以參考一下2022-03-03
JQuery基于FormData異步提交數(shù)據(jù)文件
這篇文章主要介紹了JQuery基于FormData異步提交數(shù)據(jù)文件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
下面小編就為大家分享一篇基于jquery的on和click的區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
jquery獲取easyui日期控件的值實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query獲取easyui日期控件的值實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
jquery實(shí)現(xiàn)全選功能效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)全選功能效果的實(shí)現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05