jQuery 调用后台方法（net）

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
  2 
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4 
  5 <html xmlns="http://www.w3.org/1999/xhtml">
  6 <head runat="server">
  7     <title>无标题页</title>
  8     <style type="text/css">
  9    
 10      .hover
 11         {
 12             cursor: pointer; /*小手*/
 13             background: #ffc; /*背景*/
 14         }
 15 
 16     </style>
 17     <script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script>
 18      <script type="text/javascript">
 19 
 20 
 21         //无参数调用
 22         $(document).ready(function() {
 23             $('#btn1').click(function() {
 24                 $.ajax({
 25                     type: "POST",   //访问WebService使用Post方式请求
 26                     contentType: "application/json", //WebService 会返回Json类型
 27                     url: "Default2.aspx/HelloWorld", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
 28                     data: "{}",         //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到      
 29                     dataType: 'json',
 30                     success: function(result) {     //回调函数，result，返回值
 31                         alert(result.d);
 32                     }
 33                 });
 34             });
 35         });
 36 
 37 
 38         //有参数调用
 39         $(document).ready(function() {
 40             $("#btn2").click(function() {
 41                 $.ajax({
 42                     type: "POST",
 43                     contentType: "application/json",
 44                     url: "Default2.aspx/GetWish",
 45                     data: "{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}",
 46                     dataType: 'json',
 47                     success: function(result) {
 48                         alert(result.d);
 49                     }
 50                 });
 51             });
 52         });
 53        
 54        
 55         //返回集合（引用自网络，很说明问题）
 56         $(document).ready(function() {
 57             $("#btn3").click(function() {
 58                 $.ajax({
 59                     type: "POST",
 60                     contentType: "application/json",
 61                     url: "Default2.aspx/GetArray",
 62                     data: "{i:10}",
 63                     dataType: 'json',
 64                     success: function(result) {
 65                         $(result.d).each(function() {
 66                             alert(this);
 67                             $('#dictionary').append(this.toString() + " ");
 68                             //alert(result.d.join(" | "));
 69                         });
 70                     }
 71                 });
 72             });
 73         });
 74 
 75 
 76         //返回复合类型
 77         $(document).ready(function() {
 78             $('#btn4').click(function() {
 79                 $.ajax({
 80                     type: "POST",
 81                     contentType: "application/json",
 82                     url: "Default2.aspx/GetClass",
 83                     data: "{}",
 84                     dataType: 'json',
 85                     success: function(result) {
 86                         $(result.d).each(function() {
 87                             //alert(this);
 88                             $('#dictionary').append(this['ID'] + " " + this['Value']);
 89                             //alert(result.d.join(" | "));
 90                         });
 91 
 92                     }
 93                 });
 94             });
 95         });
 96 
 97         //返回DataSet(XML)
 98         $(document).ready(function() {
 99             $('#btn5').click(function() {
100                 $.ajax({
101                     type: "POST",
102                     url: "Default2.aspx/GetDataSet",
103                     data: "{}",
104                     dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了
105                     success: function(result) {
106                     alert(result);
107                     //演示一下捕获
108                         try {  
109                             $(result).find("Table1").each(function() {
110                                 $('#dictionary').append($(this).find("ID").text() + " " + $(this).find("Value").text());
111                             });
112                         }
113                         catch (e) {
114                             alert(e);
115                             return;
116                         }
117                     },
118                     error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数
119                         if (status == 'error') {
120                             alert(status);
121                         }
122                     }
123                 });
124             });
125         });
126 
127         //Ajax 为用户提供反馈，利用ajaxStart和ajaxStop 方法，演示ajax跟踪相关事件的回调，他们两个方法可以添加给jQuery对象在Ajax前后回调
128         //但对与Ajax的监控，本身是全局性的
129         $(document).ready(function() {
130             $('#loading').ajaxStart(function() {
131                 $(this).show();
132             }).ajaxStop(function() {
133                 $(this).hide();
134             });
135         });
136 
137         // 鼠标移入移出效果，多个元素的时候，可以使用“，”隔开
138         $(document).ready(function() {
139             $('btn').hover(function() {
140                 $(this).addClass('hover');
141             }, function() {
142                 $(this).removeClass('hover');
143             });
144         });
145     </script>
146 
147 </head>
148 <body>
149     <form id="form1" runat="server">
150     <div>
151     <input type="button" id="btn1" value="HelloWorld"/>
152     <input type="button" id="btn2" value="传入参数"/>
153     <input type="button" id="btn3" value="返回集合"/>
154     <input type="button" id="btn4" value=" 返回复合类型"/>
155     <input type="button" id="btn5" value="返回DataSet(XML)"/>
156     </div>
157     <div id="dictionary">dictionary
158     </div>
159     </form>
160 </body>
161 </html>
162 ==================================================================================
163 
164 using System;
165 using System.Collections;
166 using System.Collections.Generic;
167 using System.Configuration;
168 using System.Data;
169 using System.Linq;
170 using System.Web;
171 using System.Web.Security;
172 using System.Web.UI;
173 using System.Web.UI.HtmlControls;
174 using System.Web.UI.WebControls;
175 using System.Web.UI.WebControls.WebParts;
176 using System.Web.Services;
177 
178 public partial class Default2 : System.Web.UI.Page
179 {
180     protected void Page_Load(object sender, EventArgs e)
181     {
182 
183     }
184     [WebMethod]
185     public static string HelloWorld()
186     {
187         return "123--->456";
188     }
189     [WebMethod]
190     public static string ABC(string ABC)
191     {
192         return ABC;
193     }
194     [WebMethod]
195     public static string GetWish(string value1, string value2, string value3, int value4)
196     {
197         return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4);
198     }
199     /// <summary>
200     /// 返回集合
201     /// </summary>
202     /// <param name="i"></param>
203     /// <returns></returns>
204     [WebMethod]
205     public static List<int> GetArray(int i)
206     {
207         List<int> list = new List<int>();
208 
209         while (i >= 0)
210         {
211             list.Add(i--);
212         }
213 
214         return list;
215     }
216 
217     /// <summary>
218     /// 返回一个复合类型
219     /// </summary>
220     /// <returns></returns>
221     [WebMethod]
222     public static Class1 GetClass()
223     {
224         return new Class1 { ID = "1", Value = "牛年大吉" };
225     }
226 
227 
228     /// <summary>
229     /// 返回XML
230     /// </summary>
231     /// <returns></returns>
232     [WebMethod]
233     public static DataSet GetDataSet()
234     {
235         DataSet ds = new DataSet();
236         DataTable dt = new DataTable();
237         dt.Columns.Add("ID", Type.GetType("System.String"));
238         dt.Columns.Add("Value", Type.GetType("System.String"));
239         DataRow dr = dt.NewRow();
240         dr["ID"] = "1";
241         dr["Value"] = "新年快乐";
242         dt.Rows.Add(dr);
243         dr = dt.NewRow();
244         dr["ID"] = "2";
245         dr["Value"] = "万事如意";
246         dt.Rows.Add(dr);
247         ds.Tables.Add(dt);
248         return ds;
249     }
250     public class Class1
251     {
252         public string ID { get; set; }
253         public string Value { get; set; }
254     }
255 
256 收藏于 2012-03-15