jQuery 调用后台方法(net)
001 |
<P> </P><PRE class =brush: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> |
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
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; }
}
}