利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
先来个简单的实例热热身吧。
1、无参数的方法调用
C#后台代码：
using System.Web.Services;
[WebMethod]
public static string sayHi()
{
return "Hi,Welcome to China!";
}
注意：1.方法一定要静态方法，而且要有[WebMethod]的声明.
html代码：
< div > < asp:Button ID ="btnClick" runat ="server" Text ="click me" /> < br /> < span id ="msg" ></ span > </ div >jQuery代码：
<script type="text/javascript">
$(document).ready( function() {
$("#btnClick").bind("click", function() {
$.ajax({
type: "post",
url: "ajaxHandler.aspx/sayHi",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data)
{
$("#msg").css("color", "#0000FF").html(data.d);
},
error: function(err)
{
$("#msg").css("color", "#FF0000").html("access faield:"+ err);
}
});
returnfalse;
});
});
</script>
运行结果：
通过firebug能很清楚地看到json返回的数据格式，所以在取数据的时候要data.d。
2、带参数的方法调用
C#后台代码：
[WebMethod] public static string sayHi( string address, string name) { return " Hi, " + address + " " + name; }
html代码：
< div > < asp:Button ID ="btnClick" runat ="server" Text ="click me" /> address: < asp:TextBox ID ="txtAddress" runat ="server" ></ asp:TextBox > family name: < asp:TextBox ID ="txtName" runat ="server" ></ asp:TextBox > < br /> < span id ="msg" ></ span > </ div >
jQuery代码：
<script type="text/javascript">
$(document).ready( function() {
$("#btnClick").bind("click", function() {
var add = $("#txtAddress").val();
var txtname = $("#txtName").val();
$.ajax({
type: "post",
url: "ajaxHandler.aspx/sayHi",
data: "{'address':'"+ add +"','name':'"+ txtname +"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
$("#msg").css("color", "#0000FF").html(data.d);
},
error: function(err)
{
$("#msg").css("color", "#FF0000").html("access faield:"+ err);
}
});
returnfalse;
});
});
</script>
运行结果：
3、返回List集合方法的调用
C#后台代码：
[WebMethod] public static List < string > sayHi( string address, string name) { List < string > list = new List < string > (); for ( int i = 0 ; i < 10 ; i ++ ) { list.Add( " Hi: " + i.ToString()); } list.Add( " Hi: " + address + " " + name); return list; }html代码：
< div > < asp:Button ID ="btnClick" runat ="server" Text ="click me" /> address: < asp:TextBox ID ="txtAddress" runat ="server" ></ asp:TextBox > family name: < asp:TextBox ID ="txtName" runat ="server" ></ asp:TextBox > < br /> < ul id ="msg" > </ ul > </ div >
jQuery代码：
<script type="text/javascript">
$(document).ready( function() {
$("#btnClick").bind("click", function() {
var add = $("#txtAddress").val();
var txtname = $("#txtName").val();
$.ajax({
type: "post",
url: "ajaxHandler.aspx/sayHi",
data: "{'address':'"+ add +"','name':'"+ txtname +"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
$("#msg").html("");
$(data.d).each(function()
{
$("#msg").append("<li>"+this+"</li>");
});
$("#msg").css("color", "#0000FF"); },
error: function(err) {
$("#msg").css("color", "#FF0000").html("access faield:"+ err);
}
});
returnfalse;
});
});
</script>
运行结果：
4、返回SortedList<tkey,tvalue>方法的调用
C#后台代码：
[WebMethod] public static SortedList < string , string > sayHi( string address, string name) { SortedList < string , string > sl = new SortedList < string , string > (); for ( int i = 0 ; i < 10 ; i ++ ) { sl.Add(i.ToString() + " _key " , i.ToString() + " _value " ); } sl.Add( " _key " , " _value " + address + " " + name); return sl; }
html代码：
< div > < asp:Button ID ="btnClick" runat ="server" Text ="click me" /> address: < asp:TextBox ID ="txtAddress" runat ="server" ></ asp:TextBox > family name: < asp:TextBox ID ="txtName" runat ="server" ></ asp:TextBox > < br /> < ul id ="msg" > </ ul > </ div >
jQuery代码：
< script type ="text/javascript" > $(document).ready( function () { $( " #btnClick " ).bind( " click " , function () { var add = $( " #txtAddress " ).val(); var txtname = $( " #txtName " ).val(); $.ajax({ type: " post " , url: " ajaxHandler.aspx/sayHi " , data: " {'address':' " + add + " ','name':' " + txtname + " '} " , contentType: " application/json; charset=utf-8 " , dataType: " json " , success: function (data) { $( " #msg " ).html( "" ); // 这里只取部分键、值显示 $( " #msg " ).append( " <li> " + data.d[ " 0_key " ] + " </li> " ); $( " #msg " ).append( " <li> " + data.d[ " 1_key " ] + " </li> " ); $( " #msg " ).append( " <li> " + data.d[ " 2_key " ] + " </li> " ); $( " #msg " ).append( " <li> " + data.d[ " _key " ] + " </li> " ); $( " #msg " ).css( " color " , " #0000FF " ); }, error: function (err) { $( " #msg " ).css( " color " , " #FF0000 " ).html( " access faield: " + err); } }); return false ; }); }); </ script >
运行结果：
5、操作xml
Xml文件代码：
<? xml version="1.0" encoding="utf-8" ?> < books > < book > < name > ASP.NET 3.5高级程序设计(第2版) </ name > < author > 麦克唐纳博思工作室 </ author > < wordCount > 2034000 </ wordCount > < price > 76 </ price > </ book > < book > < name > ASP.NET 3.5入门经典 </ name > < author > (荷兰)史潘加斯(Spaanjaars,I.) </ author > < wordCount > 1046000 </ wordCount > < price > 78.5 </ price > </ book > < book > < name > C#高级编程（第5版）上下卷 </ name > < author > (美)内格尔（Nagel.C） 等著 </ author > < wordCount > 24770000 </ wordCount > < price > 124 </ price > </ book > < book > < name > ASP.NET AJAX实战 </ name > < author > (美)麦克卢尔，（美）格拉维奇，（美）欧尔 等著 </ author > < wordCount > 511000 </ wordCount > < price > 44 </ price > </ book > < book > < name > ASP.NET程序开发范例宝典(C#)(第2版) </ name > < author > 张跃延，苏宇，贯伟红 </ author > < wordCount > 1419000 </ wordCount > < price > 71.2 </ price > </ book > </ books >
html代码：
< div > < asp:Button ID ="btnClick" runat ="server" Text ="click me" /> address: < asp:TextBox ID ="txtAddress" runat ="server" ></ asp:TextBox > family name: < asp:TextBox ID ="txtName" runat ="server" ></ asp:TextBox > < br /> < ul id ="msg" > </ ul > </ div >
jQuery代码：
< script type ="text/javascript" > $(document).ready( function () { $( " #btnClick " ).bind( " click " , function () { $.ajax({ url: " books.xml " , dataType: " xml " , success: function (xmlData) { $( " #msg " ).html( "" ); $(xmlData).find( " books>book " ).each( function () { $( " #msg " ).append( " ====new book==== " ); $( " #msg " ).append( " <li>name: " + $( this ).find( " name " ).text() + " </li> " ); $( " #msg " ).append( " <li>author: " + $( this ).find( " author " ).text() + " </li> " ); $( " #msg " ).append( " <li>wordCount: " + $( this ).find( " wordCount " ).text() + " </li> " ); $( " #msg " ).append( " <li>price: " + $( this ).find( " price " ).text() + " </li> " ); }); $( " #msg " ).css( " color " , " #0000FF " ); }, error: function (err) { $( " #msg " ).css( " color " , " #FF0000 " ).html( " access faield: " + err); } }); return false ; }); }); </ script >
运行结果：
6.传参数带数组格式
var myCars = new Array();
myCars[0] = "Saab"; myCars[1] = "Volvo"; myCars[2] = "BMW"; $.ajax({ url: 'Data.aspx/NewsEdit', type: "POST", contentType: "application/json", datatype: "json",data: JSON.stringify({
newsTypeId: 1,
newsTitle: '标题',
newsItem: myCars });, success: function (result) { }, error: function (err) { alert(err); }
});
[WebMethod] public static string NewsEdit(int newsTypeId, string newsTitle, List<CustomMessageNewsInfo> newsItem) { StringBuilder sb = new StringBuilder(); int code = 0; string msg = string.Empty; sb.Append("{"); sb.Append("\"code\":\"" + code + "\","); sb.Append("\"msg\":\"" + msg + "\""); sb.Append("}"); return StringHelper.ToString(sb);}
转载自：http://www.cnblogs.com/zxhoo/archive/2011/01/30/1947752.html
