jQuery Ajax 方法调用 Asp.Net WebService 的详细例子

         这很常用,搜索了一下博客园的“找找看”和谷歌,看到大部分都是转载于一两篇文章(而且来源还不是博客园),有的是简单的说一点无法运行,给初学者的调试和学习带来不方便,我在这里将jQuery Ajax 调用Aspx.Net WebService 的几个常用的方法做了一个整理,提供给正在找这方面内容的博友,希望能给学习jQuery的朋友一点帮助,可以直接复制代码运行

 

ws.aspx 代码

 

 

  
  
  
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head id="Head1" runat="server"> 
  4.     <title></title> 
  5.  
  6.     <script src="jquery.js" type="text/javascript"></script> 
  7.  
  8.     <style type="text/css"> 
  9.         .hover 
  10.         { 
  11.             cursor: pointer; /*小手*/ 
  12.             background: #ffc; /*背景*/ 
  13.         } 
  14.         .button 
  15.         { 
  16.             width: 150px; 
  17.             float: left; 
  18.             text-align: center; 
  19.             margin: 10px; 
  20.             padding: 10px; 
  21.             border: 1px solid #888; 
  22.         } 
  23.         #dictionary 
  24.         { 
  25.             text-align: center; 
  26.             font-size: 18px; 
  27.             clear: both; 
  28.             border-top: 3px solid #888; 
  29.         } 
  30.         #loading 
  31.         { 
  32.             border: 1px #000 solid; 
  33.             background-color: #eee; 
  34.             padding: 20px; 
  35.             margin: 100px 0 0 200px; 
  36.             position: absolute; 
  37.             display: none; 
  38.         } 
  39.         #switcher 
  40.         { 
  41.         } 
  42.     </style> 
  43.  
  44.     <script type="text/javascript"> 
  45.  
  46.  
  47.         //无参数调用 
  48.         $(document).ready(function() { 
  49.             $('#btn1').click(function() { 
  50.                 $.ajax({ 
  51.                     type: "POST",   //访问WebService使用Post方式请求 
  52.                     contentType: "application/json", //WebService 会返回Json类型 
  53.                     url: "WebService1.asmx/HelloWorld", //调用WebService的地址和方法名称组合 ---- WsURL/方法名 
  54.                     data: "{}",         //这里是要传递的参数,格式为 data: "{paraName:paraValue}",下面将会看到        
  55.                     dataType: 'json', 
  56.                     success: function(result) {     //回调函数,result,返回值 
  57.                         $('#dictionary').append(result.d); 
  58.                     } 
  59.                 }); 
  60.             }); 
  61.         }); 
  62.  
  63.  
  64.         //有参数调用 
  65.         $(document).ready(function() { 
  66.             $("#btn2").click(function() { 
  67.                 $.ajax({ 
  68.                     type: "POST", 
  69.                     contentType: "application/json", 
  70.                     url: "WebService1.asmx/GetWish", 
  71.                     data: "{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}", 
  72.                     dataType: 'json', 
  73.                     success: function(result) { 
  74.                         $('#dictionary').append(result.d); 
  75.                     } 
  76.                 }); 
  77.             }); 
  78.         }); 
  79.          
  80.          
  81.         //返回集合(引用自网络,很说明问题) 
  82.         $(document).ready(function() { 
  83.             $("#btn3").click(function() { 
  84.                 $.ajax({ 
  85.                     type: "POST", 
  86.                     contentType: "application/json", 
  87.                     url: "WebService1.asmx/GetArray", 
  88.                     data: "{i:10}", 
  89.                     dataType: 'json', 
  90.                     success: function(result) { 
  91.                         $(result.d).each(function() { 
  92.                             //alert(this); 
  93.                             $('#dictionary').append(this.toString() + " "); 
  94.                             //alert(result.d.join(" | ")); 
  95.                         }); 
  96.                     } 
  97.                 }); 
  98.             }); 
  99.         }); 
  100.  
  101.  
  102.         //返回复合类型 
  103.         $(document).ready(function() { 
  104.             $('#btn4').click(function() { 
  105.                 $.ajax({ 
  106.                     type: "POST", 
  107.                     contentType: "application/json", 
  108.                     url: "WebService1.asmx/GetClass", 
  109.                     data: "{}", 
  110.                     dataType: 'json', 
  111.                     success: function(result) { 
  112.                         $(result.d).each(function() { 
  113.                             //alert(this); 
  114.                             $('#dictionary').append(this['ID'] + " " + this['Value']); 
  115.                             //alert(result.d.join(" | ")); 
  116.                         }); 
  117.  
  118.                     } 
  119.                 }); 
  120.             }); 
  121.         }); 
  122.  
  123.         //返回DataSet(XML) 
  124.         $(document).ready(function() { 
  125.             $('#btn5').click(function() { 
  126.                 $.ajax({ 
  127.                     type: "POST", 
  128.                     url: "WebService1.asmx/GetDataSet", 
  129.                     data: "{}", 
  130.                     dataType: 'xml', //返回的类型为XML ,和前面的Json,不一样了 
  131.                     success: function(result) { 
  132.                     //演示一下捕获 
  133.                         try {    
  134.                             $(result).find("Table1").each(function() { 
  135.                                 $('#dictionary').append($(this).find("ID").text() + " " + $(this).find("Value").text()); 
  136.                             }); 
  137.                         } 
  138.                         catch (e) { 
  139.                             alert(e); 
  140.                             return; 
  141.                         } 
  142.                     }, 
  143.                     error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数 
  144.                         if (status == 'error') { 
  145.                             alert(status); 
  146.                         } 
  147.                     } 
  148.                 }); 
  149.             }); 
  150.         }); 
  151.  
  152.  
  153.  
  154.  
  155.         //Ajax 为用户提供反馈,利用ajaxStart和ajaxStop 方法,演示ajax跟踪相关事件的回调,他们两个方法可以添加给jQuery对象在Ajax前后回调 
  156.         //但对与Ajax的监控,本身是全局性的 
  157.         $(document).ready(function() { 
  158.             $('#loading').ajaxStart(function() { 
  159.                 $(this).show(); 
  160.             }).ajaxStop(function() { 
  161.                 $(this).hide(); 
  162.             }); 
  163.         }); 
  164.  
  165.         // 鼠标移入移出效果,多个元素的时候,可以使用“,”隔开 
  166.         $(document).ready(function() { 
  167.             $('div.button').hover(function() { 
  168.                 $(this).addClass('hover'); 
  169.             }, function() { 
  170.                 $(this).removeClass('hover'); 
  171.             }); 
  172.         }); 
  173.          
  174.          
  175.     </script> 
  176.  
  177. </head> 
  178. <body> 
  179.     <form id="form1" runat="server"> 
  180.     <div id="switcher"> 
  181.         <h2> 
  182.             jQuery 的WebServices 调用</h2> 
  183.         <div class="button" id="btn1"> 
  184.             HelloWorld</div> 
  185.         <div class="button" id="btn2"> 
  186.             传入参数</div> 
  187.         <div class="button" id="btn3"> 
  188.             返回集合</div> 
  189.         <div class="button" id="btn4"> 
  190.             返回复合类型</div> 
  191.         <div class="button" id="btn5"> 
  192.             返回DataSet(XML)</div> 
  193.     </div> 
  194.     <div id="loading"> 
  195.         服务器处理中,请稍后。 
  196.     </div> 
  197.     <div id="dictionary"> 
  198.     </div> 
  199.     </form> 
  200. </body> 
  201. </html> 

WebService1.asmx.cs

 

  
  
  
  
  1. using System; 
  2. using System.Collections.Generic; 
  3. using System.Linq; 
  4. using System.Web; 
  5. using System.Web.Services; 
  6. using System.Data; 
  7.  
  8. namespace jQuery.Learning 
  9.     /// <summary> 
  10.     /// WebService1 的摘要说明 
  11.     /// </summary> 
  12.     [WebService(Namespace = "http://tempuri.org/")] 
  13.     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
  14.     [System.ComponentModel.ToolboxItem(false)] 
  15.     // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。 
  16.     [System.Web.Script.Services.ScriptService] 
  17.     public class WebService1 : System.Web.Services.WebService 
  18.     { 
  19.         /// <summary> 
  20.         /// 无参数 
  21.         /// </summary> 
  22.         /// <returns></returns> 
  23.         [WebMethod] 
  24.         public string HelloWorld() 
  25.         { 
  26.             return "Hello World "
  27.         } 
  28.  
  29.         /// <summary> 
  30.         /// 带参数 
  31.         /// </summary> 
  32.         /// <param name="value1"></param> 
  33.         /// <param name="value2"></param> 
  34.         /// <param name="value3"></param> 
  35.         /// <param name="value4"></param> 
  36.         /// <returns></returns> 
  37.         [WebMethod] 
  38.         public string GetWish(string value1, string value2, string value3, int value4) 
  39.         { 
  40.             return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4); 
  41.         } 
  42.  
  43.         /// <summary> 
  44.         /// 返回集合 
  45.         /// </summary> 
  46.         /// <param name="i"></param> 
  47.         /// <returns></returns> 
  48.         [WebMethod] 
  49.         public List<int> GetArray(int i) 
  50.         { 
  51.             List<int> list = new List<int>(); 
  52.  
  53.             while (i >= 0) 
  54.             { 
  55.                 list.Add(i--); 
  56.             } 
  57.  
  58.             return list; 
  59.         } 
  60.  
  61.         /// <summary> 
  62.         /// 返回一个复合类型 
  63.         /// </summary> 
  64.         /// <returns></returns> 
  65.         [WebMethod] 
  66.         public Class1 GetClass() 
  67.         { 
  68.             return new Class1 { ID = "1", Value = "牛年大吉" }; 
  69.         } 
  70.  
  71.  
  72.         /// <summary> 
  73.         /// 返回XML 
  74.         /// </summary> 
  75.         /// <returns></returns> 
  76.         [WebMethod] 
  77.         public DataSet GetDataSet() 
  78.         { 
  79.             DataSet ds = new DataSet(); 
  80.             DataTable dt = new DataTable(); 
  81.             dt.Columns.Add("ID", Type.GetType("System.String")); 
  82.             dt.Columns.Add("Value", Type.GetType("System.String")); 
  83.             DataRow dr = dt.NewRow(); 
  84.             dr["ID"] = "1"
  85.             dr["Value"] = "新年快乐"
  86.             dt.Rows.Add(dr); 
  87.             dr = dt.NewRow(); 
  88.             dr["ID"] = "2"
  89.             dr["Value"] = "万事如意"
  90.             dt.Rows.Add(dr); 
  91.             ds.Tables.Add(dt); 
  92.             return ds; 
  93.         } 
  94.  
  95.  
  96.     } 
  97.     //自定义的类,只有两个属性 
  98.     public class Class1 
  99.     { 
  100.         public string ID { getset; } 
  101.         public string Value { getset; } 
  102.     } 

示例代码:http://files.cnblogs.com/TerryFeng/jQuery1.rar

转自:http://www.cnblogs.com/terryfeng/archive/2009/02/01/1382123.html

 

你可能感兴趣的:(.net,Ajax,Ajax,职场,休闲,WebServices)