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