jQuery ajaxがWCFサービスを呼び出す方法(demoダウンロード付き)を実現

8561 ワード

この例では、jQueryがajax呼び出しWCFサービスを実装する方法について説明する.皆さんの参考にしてください.具体的には以下の通りです.
AJAX呼び出しWCFサービスについてはドメイン間とドメイン間ではない2つの方法がありますが、今日はドメイン間ではない呼び出し方法についてご紹介します.DEMOはVS 2008で書かれています.
テストと研究を経て、AJAXがWCFサービスを呼び出すには以下の条件を満たさなければならないことが分かった.
1.wcfの通信方式はwebHttpBinding 2を使用する必要がある.ノードの値3を設定する必要があります.サービスの実装にはタグを追加する必要があります

   [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 
 

4.メソッドの前に次のタグを追加する必要があります.

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

5.ajaxメソッドで渡されるパラメータ名は、wcfサービスで提供されるパラメータメソッド名と一致する必要があります.
以下は本人が書いたコードで、色を表記するのは注意すべき点です
サーバ側プロファイルコード

 
   
    
     
   
     
     
      
       
      
     
    
   
   
    
     
      
      
      
      
     
    
   
   
    
   
   
   



サーバ側コード

[ServiceContract] 
 public interface IService1 
 { 
  [OperationContract] 
  string GetData(int value); 
  [OperationContract] 
  City GetDataUsingDataContract(City composite); 
   [OperationContract] 
  List GetList(); 
   [OperationContract] 
  List GetListData(List 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; } 
  } 
}


インプリメンテーションコード

[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 GetList() 
  { 
   List list = new List(); 
   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 GetListData(List list) 
  { 
   return list; 
  } 
  #endregion 
}


クライアント呼び出しコード

 
 
 
 
  
 <script src="jquery-1.7.1.min.js" type="text/javascript"/> 
 <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> 
 
 
 </code></pre><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();"/> 
 
 

 
 </div> 
 <p>                。</p> 
 <p>         jQuery        。</p> 
 <div class="clearfix"> 
  <span id="art_bot" class="jbTestPos"/> 
 </div> 
</div>
                            </div>
                        </div>