jQuery melaksanakan kaedah ajax untuk memanggil perkhidmatan WCF (dengan muat turun demo)_jquery

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan ajax untuk memanggil perkhidmatan WCF. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Berkenaan AJAX memanggil perkhidmatan WCF, terdapat dua cara: merentas domain dan bukan merentas domain Hari ini kami akan memperkenalkan kaedah panggilan bukan merentas domain terlebih dahulu. DEMO telah ditulis dalam VS2008.

Selepas ujian dan penyelidikan, didapati bahawa perkhidmatan WCF panggilan AJAX mesti memenuhi syarat berikut

1. Kaedah komunikasi wcf mesti menggunakan webHttpBinding
2. Nilai nod mesti ditetapkan
3. Pelaksanaan perkhidmatan mesti menambah tanda

Salin kod Kod adalah seperti berikut:

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Dibenarkan)>

4. Tanda berikut
mesti ditambah di hadapan kaedah

Salin kod Kod adalah seperti berikut:

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

5. Nama parameter yang diluluskan dalam kaedah ajax mesti konsisten dengan nama kaedah parameter yang disediakan dalam perkhidmatan wcf
Berikut adalah kod yang saya tulis Warna yang ditanda adalah kawasan yang memerlukan perhatian

Kod fail konfigurasi sisi pelayan

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

Kod sisi pelayan

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

Kod pelaksanaan

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

Kod panggilan pelanggan

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

Klik di sini untuk kod contoh lengkap

Muat turun dari tapak ini.

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.