jQuery 调用后台方法

jQuery 调用后台方法（net）

001
<P> </P><PRE class=html;gutter:false;><%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 

002
  
003
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

004
  
005
<html xmlns="http://www.w3.org/1999/xhtml"> 

006
<head runat="server"> 

007
    <title>无标题页</title> 

008
    <style type="text/css"> 

009
      
010
     .hover 

011
        { 

012
            cursor: pointer; /*小手*/

013
            background: #ffc; /*背景*/

014
        } 

015
  
016
    </style> 

017
    <script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script> 

018
     <script type="text/javascript"> 

019
  
020
  
021
        //无参数调用 

022
        $(document).ready(function() { 

023
            $('#btn1').click(function() { 

024
                $.ajax({ 

025
                    type: "POST",   //访问WebService使用Post方式请求 

026
                    contentType: "application/json", //WebService 会返回Json类型 

027
                    url: "Default2.aspx/HelloWorld", //调用WebService的地址和方法名称组合 ---- WsURL/方法名 

028
                    data: "{}",         //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到        

029
                    dataType: 'json', 

030
                    success: function(result) {     //回调函数，result，返回值 

031
                        alert(result.d); 

032
                    } 

033
                }); 

034
            }); 

035
        }); 

036
  
037
  
038
        //有参数调用 

039
        $(document).ready(function() { 

040
            $("#btn2").click(function() { 

041
                $.ajax({ 

042
                    type: "POST", 

043
                    contentType: "application/json", 

044
                    url: "Default2.aspx/GetWish", 

045
                    data: "{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}", 

046
                    dataType: 'json', 

047
                    success: function(result) { 

048
                        alert(result.d); 

049
                    } 

050
                }); 

051
            }); 

052
        }); 

053
          
054
          
055
        //返回集合（引用自网络，很说明问题） 

056
        $(document).ready(function() { 

057
            $("#btn3").click(function() { 

058
                $.ajax({ 

059
                    type: "POST", 

060
                    contentType: "application/json", 

061
                    url: "Default2.aspx/GetArray", 

062
                    data: "{i:10}", 

063
                    dataType: 'json', 

064
                    success: function(result) { 

065
                        $(result.d).each(function() { 

066
                            alert(this); 

067
                            $('#dictionary').append(this.toString() + " "); 

068
                            //alert(result.d.join(" | ")); 

069
                        }); 

070
                    } 

071
                }); 

072
            }); 

073
        }); 

074
  
075
  
076
        //返回复合类型 

077
        $(document).ready(function() { 

078
            $('#btn4').click(function() { 

079
                $.ajax({ 

080
                    type: "POST", 

081
                    contentType: "application/json", 

082
                    url: "Default2.aspx/GetClass", 

083
                    data: "{}", 

084
                    dataType: 'json', 

085
                    success: function(result) { 

086
                        $(result.d).each(function() { 

087
                            //alert(this); 

088
                            $('#dictionary').append(this['ID'] + " " + this['Value']); 

089
                            //alert(result.d.join(" | ")); 

090
                        }); 

091
  
092
                    } 

093
                }); 

094
            }); 

095
        }); 

096
  
097
        //返回DataSet(XML) 

098
        $(document).ready(function() { 

099
            $('#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
</PRE>

代码

using System;
using System.Collections;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.Services;

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    [WebMethod]
    public static string HelloWorld()
    {
        return "123--->456";
    }
    [WebMethod]
    public static string ABC(string ABC)
    {
        return ABC;
    }
    [WebMethod]
    public static string GetWish(string value1, string value2, string value3, int value4)
    {
        return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4);
    }
    /// <summary>
    /// 返回集合
    /// </summary>
    /// <param name="i"></param>
    /// <returns></returns>
    [WebMethod]
    public static List<int> GetArray(int i)
    {
        List<int> list = new List<int>();

        while (i >= 0)
        {
            list.Add(i--);
        }

        return list;
    }

    /// <summary>
    /// 返回一个复合类型
    /// </summary>
    /// <returns></returns>
    [WebMethod]
    public static Class1 GetClass()
    {
        return new Class1 { ID = "1", Value = "牛年大吉" };
    }


    /// <summary>
    /// 返回XML
    /// </summary>
    /// <returns></returns>
    [WebMethod]
    public static DataSet GetDataSet()
    {
        DataSet ds = new DataSet();
        DataTable dt = new DataTable();
        dt.Columns.Add("ID", Type.GetType("System.String"));
        dt.Columns.Add("Value", Type.GetType("System.String"));
        DataRow dr = dt.NewRow();
        dr["ID"] = "1";
        dr["Value"] = "新年快乐";
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr["ID"] = "2";
        dr["Value"] = "万事如意";
        dt.Rows.Add(dr);
        ds.Tables.Add(dt);
        return ds;
    }
    public class Class1
    {
        public string ID { get; set; }
        public string Value { get; set; }
    }

}