jQuery實(shí)現(xiàn)ajax調(diào)用WCF服務(wù)的方法(附帶demo下載)
本文實(shí)例講述了jQuery實(shí)現(xiàn)ajax調(diào)用WCF服務(wù)的方法。分享給大家供大家參考,具體如下:
關(guān)于AJAX調(diào)用WCF服務(wù)分為跨域和不跨域兩種方式,今天咱們先介紹下不跨域下的調(diào)用方法。DEMO是在VS2008寫的.
經(jīng)過測(cè)試與研究,發(fā)現(xiàn)AJAX調(diào)用WCF服務(wù)必須滿足以下條件
1.wcf的通訊方式必須使用webHttpBinding
2.必須設(shè)置<endpointBehaviors>節(jié)點(diǎn)的值
3.服務(wù)的實(shí)現(xiàn)必須添加標(biāo)記
4.方法前面必須添加如下標(biāo)記
5.ajax方法中傳遞的參數(shù)名稱必須和wcf服務(wù)中提供的參數(shù)方法名稱一致
以下是本人寫的代碼,標(biāo)記顏色的是需要注意的地方
服務(wù)器端配置文件代碼
<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">
<!-- 為避免泄漏元數(shù)據(jù)信息,請(qǐng)?jiān)诓渴鹎皩⒁韵轮翟O(shè)置為 false 并刪除上面的元數(shù)據(jù)終結(jié)點(diǎn)-->
<serviceMetadata httpGetEnabled="true"/>
<!-- 要接收故障異常詳細(xì)信息以進(jìn)行調(diào)試,請(qǐng)將以下值設(shè)置為 true。在部署前設(shè)置為 false 以避免泄漏異常信息-->
<serviceDebug includeExceptionDetailInFaults="false"/>
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="HttpBehavior">
<webHttp/>
</behavior>
</endpointBehaviors>
</behaviors>
</system.serviceModel>
服務(wù)器端代碼
[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);
}
// 使用下面示例中說明的數(shù)據(jù)約定將復(fù)合類型添加到服務(wù)操作。
[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; }
}
}
實(shí)現(xiàn)代碼
[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
}
客戶端調(diào)用代碼
<%@ 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">
//參數(shù)為整數(shù)的方法
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');
}
});
}
//參數(shù)為實(shí)體類的方法
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="調(diào)用1" onclick="fn1();" /></div>
<input id="Button2" type="button" value="調(diào)用2" onclick="fn2();" />
<br />
<input id="Button3" type="button" value="調(diào)用3" onclick="fn3();" /></form>
<br />
<input id="Button4" type="button" value="調(diào)用4" onclick="fn4();"/>
</body>
</html>
完整實(shí)例代碼代碼點(diǎn)擊此處本站下載。
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- C# 一個(gè)WCF簡(jiǎn)單實(shí)例
- 關(guān)于.NET/C#/WCF/WPF 打造IP網(wǎng)絡(luò)智能視頻監(jiān)控系統(tǒng)的介紹
- C# WCF簡(jiǎn)單入門圖文教程(VS2010版)
- C# yield在WCF中的錯(cuò)誤用法(一)
- C# yield在WCF中的錯(cuò)誤使用(二)
- jQuery ajax調(diào)用WCF服務(wù)實(shí)例
- jQuery Ajax調(diào)用WCF服務(wù)詳細(xì)教程
- jquery調(diào)用wcf并展示出數(shù)據(jù)的方法
- WinForm窗體調(diào)用WCF服務(wù)窗體卡死問題
- 總結(jié)C#動(dòng)態(tài)調(diào)用WCF接口的兩種方法
相關(guān)文章
jquery 動(dòng)態(tài)增加,減少input表單的簡(jiǎn)單方法(必看)
下面小編就為大家?guī)硪黄猨query 動(dòng)態(tài)增加,減少input表單的簡(jiǎn)單方法(必看)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
動(dòng)態(tài)生成的DOM不會(huì)觸發(fā)onclick事件的原因及解決方法
下面小編就為大家?guī)硪黄獎(jiǎng)討B(tài)生成的DOM不會(huì)觸發(fā)onclick事件的原因及解決方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
jQuery實(shí)現(xiàn)下滑菜單導(dǎo)航效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)下滑菜單導(dǎo)航效果代碼,通過jquery操作鼠標(biāo)事件及頁面樣式動(dòng)態(tài)操作實(shí)現(xiàn)下滑菜單導(dǎo)航功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
toggle一個(gè)div顯示或隱藏且可擴(kuò)展成自定義下拉框
本文為大家介紹下如何讓一個(gè)div顯示或隱藏且可擴(kuò)展成自定義下拉框,具體實(shí)現(xiàn)如下,感興趣的朋友可參考下,希望對(duì)大家有所幫助2013-09-09
jquery中$.fn和圖片滾動(dòng)效果實(shí)現(xiàn)的必備知識(shí)總結(jié)
圖片滾動(dòng)效果相信大家都使用過,看上去很簡(jiǎn)單的一個(gè)效果,如果想熟練的掌握必須知道jquery、IIFE、setInterval等基礎(chǔ)以及$.fn用法,下面這篇文章主要介紹了關(guān)于jquery中$.fn和圖片滾動(dòng)效果制作的必備知識(shí),需要的朋友可以參考下。2017-04-04
jQuery操作Dom元素與遍歷以及JS遍歷詳細(xì)講解
這篇文章主要介紹了jQuery操作Dom元素、jQuery遍歷、JavaScript遍歷,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
jQuery 利用ztree實(shí)現(xiàn)樹形表格的實(shí)例代碼
最近公司要做一個(gè)樹形表格,由于之前對(duì)ztree實(shí)現(xiàn)基本的樹形結(jié)構(gòu),所以想到用ztree來做,下面小編給大家分享實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2017-09-09

