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

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

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.     <script src="jquery.js" type="text/javascript"></script>

  6.     <style type="text/css">
  7.         .hover
  8.         {
  9.             cursor: pointer; /*小手*/
  10.             background: #ffc; /*背景*/
  11.         }
  12.         .button
  13.         {
  14.             width: 150px;
  15.             float: left;
  16.             text-align: center;
  17.             margin: 10px;
  18.             padding: 10px;
  19.             border: 1px solid #888;
  20.         }
  21.         #dictionary
  22.         {
  23.             text-align: center;
  24.             font-size: 18px;
  25.             clear: both;
  26.             border-top: 3px solid #888;
  27.         }
  28.         #loading
  29.         {
  30.             border: 1px #000 solid;
  31.             background-color: #eee;
  32.             padding: 20px;
  33.             margin: 100px 0 0 200px;
  34.             position: absolute;
  35.             display: none;
  36.         }
  37.         #switcher
  38.         {
  39.         }
  40.     </style>

  41.     <script type="text/javascript">


  42.         //无参数调用
  43.         $(document).ready(function() {
  44.             $('#btn1').click(function() {
  45.                 $.ajax({
  46.                     type: "POST",  //访问WebService使用Post方式请求
  47.                     contentType: "application/json", //WebService 会返回Json类型
  48.                     url: "WebService1.asmx/HelloWorld", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
  49.                     data: "{}",        //这里是要传递的参数,格式为 data: "{paraName:paraValue}",下面将会看到     
  50.                     dataType: 'json',
  51.                     success: function(result) {    //回调函数,result,返回值
  52.                         $('#dictionary').append(result.d);
  53.                     }
  54.                 });
  55.             });
  56.         });


  57.         //有参数调用
  58.         $(document).ready(function() {
  59.             $("#btn2").click(function() {
  60.                 $.ajax({
  61.                     type: "POST",
  62.                     contentType: "application/json",
  63.                     url: "WebService1.asmx/GetWish",
  64.                     data: "{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}",
  65.                     dataType: 'json',
  66.                     success: function(result) {
  67.                         $('#dictionary').append(result.d);
  68.                     }
  69.                 });
  70.             });
  71.         });
  72.        
  73.        
  74.         //返回集合(引用自网络,很说明问题)
  75.         $(document).ready(function() {
  76.             $("#btn3").click(function() {
  77.                 $.ajax({
  78.                     type: "POST",
  79.                     contentType: "application/json",
  80.                     url: "WebService1.asmx/GetArray",
  81.                     data: "{i:10}",
  82.                     dataType: 'json',
  83.                     success: function(result) {
  84.                         $(result.d).each(function() {
  85.                             //alert(this);
  86.                             $('#dictionary').append(this.toString() + " ");
  87.                             //alert(result.d.join(" | "));
  88.                         });
  89.                     }
  90.                 });
  91.             });
  92.         });


  93.         //返回复合类型
  94.         $(document).ready(function() {
  95.             $('#btn4').click(function() {
  96.                 $.ajax({
  97.                     type: "POST",
  98.                     contentType: "application/json",
  99.                     url: "WebService1.asmx/GetClass",
  100.                     data: "{}",
  101.                     dataType: 'json',
  102.                     success: function(result) {
  103.                         $(result.d).each(function() {
  104.                             //alert(this);
  105.                             $('#dictionary').append(this['ID'] + " " + this['Value']);
  106.                             //alert(result.d.join(" | "));
  107.                         });

  108.                     }
  109.                 });
  110.             });
  111.         });

  112.         //返回DataSet(XML)
  113.         $(document).ready(function() {
  114.             $('#btn5').click(function() {
  115.                 $.ajax({
  116.                     type: "POST",
  117.                     url: "WebService1.asmx/GetDataSet",
  118.                     data: "{}",
  119.                     dataType: 'xml', //返回的类型为XML ,和前面的Json,不一样了
  120.                     success: function(result) {
  121.                     //演示一下捕获
  122.                         try { 
  123.                             $(result).find("Table1").each(function() {
  124.                                 $('#dictionary').append($(this).find("ID").text() + " " + $(this).find("Value").text());
  125.                             });
  126.                         }
  127.                         catch (e) {
  128.                             alert(e);
  129.                             return;
  130.                         }
  131.                     },
  132.                     error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数
  133.                         if (status == 'error') {
  134.                             alert(status);
  135.                         }
  136.                     }
  137.                 });
  138.             });
  139.         });




  140.         //Ajax 为用户提供反馈,利用ajaxStart和ajaxStop 方法,演示ajax跟踪相关事件的回调,他们两个方法可以添加给jQuery对象在Ajax前后回调
  141.         //但对与Ajax的监控,本身是全局性的
  142.         $(document).ready(function() {
  143.             $('#loading').ajaxStart(function() {
  144.                 $(this).show();
  145.             }).ajaxStop(function() {
  146.                 $(this).hide();
  147.             });
  148.         });

  149.         // 鼠标移入移出效果,多个元素的时候,可以使用“,”隔开
  150.         $(document).ready(function() {
  151.             $('div.button').hover(function() {
  152.                 $(this).addClass('hover');
  153.             }, function() {
  154.                 $(this).removeClass('hover');
  155.             });
  156.         });
  157.        
  158.        
  159.     </script>

  160. </head>
  161. <body>
  162.     <form id="form1" runat="server">
  163.     <div id="switcher">
  164.         <h2>
  165.             jQuery 的WebServices 调用</h2>
  166.         <div class="button" id="btn1">
  167.             HelloWorld</div>
  168.         <div class="button" id="btn2">
  169.             传入参数</div>
  170.         <div class="button" id="btn3">
  171.             返回集合</div>
  172.         <div class="button" id="btn4">
  173.             返回复合类型</div>
  174.         <div class="button" id="btn5">
  175.             返回DataSet(XML)</div>
  176.     </div>
  177.     <div id="loading">
  178.         服务器处理中,请稍后。
  179.     </div>
  180.     <div id="dictionary">
  181.     </div>
  182.     </form>
  183. </body>
  184. </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. namespace jQuery.Learning
  8. {
  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.         /// <summary>
  29.         /// 带参数
  30.         /// </summary>
  31.         /// <param name="value1"></param>
  32.         /// <param name="value2"></param>
  33.         /// <param name="value3"></param>
  34.         /// <param name="value4"></param>
  35.         /// <returns></returns>
  36.         [WebMethod]
  37.         public string GetWish(string value1, string value2, string value3, int value4)
  38.         {
  39.             return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4);
  40.         }

  41.         /// <summary>
  42.         /// 返回集合
  43.         /// </summary>
  44.         /// <param name="i"></param>
  45.         /// <returns></returns>
  46.         [WebMethod]
  47.         public List<int> GetArray(int i)
  48.         {
  49.             List<int> list = new List<int>();

  50.             while (i >= 0)
  51.             {
  52.                 list.Add(i--);
  53.             }

  54.             return list;
  55.         }

  56.         /// <summary>
  57.         /// 返回一个复合类型
  58.         /// </summary>
  59.         /// <returns></returns>
  60.         [WebMethod]
  61.         public Class1 GetClass()
  62.         {
  63.             return new Class1 { ID = "1", Value = "牛年大吉" };
  64.         }


  65.         /// <summary>
  66.         /// 返回XML
  67.         /// </summary>
  68.         /// <returns></returns>
  69.         [WebMethod]
  70.         public DataSet GetDataSet()
  71.         {
  72.             DataSet ds = new DataSet();
  73.             DataTable dt = new DataTable();
  74.             dt.Columns.Add("ID", Type.GetType("System.String"));
  75.             dt.Columns.Add("Value", Type.GetType("System.String"));
  76.             DataRow dr = dt.NewRow();
  77.             dr["ID"] = "1";
  78.             dr["Value"] = "新年快乐";
  79.             dt.Rows.Add(dr);
  80.             dr = dt.NewRow();
  81.             dr["ID"] = "2";
  82.             dr["Value"] = "万事如意";
  83.             dt.Rows.Add(dr);
  84.             ds.Tables.Add(dt);
  85.             return ds;
  86.         }


  87.     }
  88.     //自定义的类,只有两个属性
  89.     public class Class1
  90.     {
  91.         public string ID { get; set; }
  92.         public string Value { get; set; }
  93.     }
  94. }
复制代码
jQuery for Asp.Net 系列

示例代码:
附件: 亲,您没有权限下载或查看附件喔:-) 试试登录注册吧!
TOP

xuexi
TOP

深情顶帖,楼主加油!
TOP

深情顶帖,楼主加油!
TOP

深情顶帖,楼主加油!
TOP

深情顶帖,楼主加油!
TOP

深情顶帖,楼主加油!
TOP

好东西 非常感谢 学习
TOP

代码写的不错,入门很有帮助,多谢
TOP

很好 非常感谢 正需要学习呢 多谢
TOP