利用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);
}
});
return false;
});
});
</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);
}
});
return false;
});
});
</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);
}
});
return false;
});
});
</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>
运行结果：
更多jquery.ajax()调用asp.net后台方法。