文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>jQuery 调用后台方法

jQuery 调用后台方法

时间:2010-09-20  来源:Ole

jQuery 调用后台方法(net)

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; }
}

}

 

排行榜 更多 +
辰域智控app

辰域智控app

系统工具 下载
网医联盟app

网医联盟app

运动健身 下载
汇丰汇选App

汇丰汇选App

金融理财 下载