ajax 实例

1.新建demo.aspx页面。
2.首先在该页面的后台文件demos.aspx.cs中添加引用。

 using System.Web.Services;

 3.无参数的方法调用. 

 大家注意了，这个版本不能低于.net framework 2.0。2.0已下不支持的。
 后台代码： 

 [WebMethod] 
 public static string SayHello() 
{ 
 return "Hello Ajax!"; 
}

 JS代码： 

AJAX 调用后台的方法" alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" real_src="http://common.cnblogs.com/images/copycode.gif">

 $(function() { 
$("#btnOK").click(function() { 
$.ajax({ 
 //要用post方式 
type: "Post", 
 //方法所在页面和方法名 
url: "Demo.aspx/SayHello", 
contentType: "application/json; charset=utf-8", 
dataType: "json", 
success: function(data) { 
 //返回的数据用data.d获取内容 
alert(data.d); 
}, 
error: function(err) { 
alert(err); 
} 
}); 
 
 //禁用按钮的提交 
 return false; 
}); 
});

AJAX 调用后台的方法" alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" real_src="http://common.cnblogs.com/images/copycode.gif">

 页面代码： 

"form1"
runat="server">

"btnOK"
runat="server"
Text="验证用户"
/>

 运行效果如下：

AJAX 调用后台的方法" alt="" src="https://pic002.cnblogs.com/images/2012/159999/2012031421243392.jpg" real_src="http://pic002.cnblogs.com/images/2012/159999/2012031421243392.jpg" action-type="show-slide" action-data="http%3A%2F%2Fpic002.cnblogs.com%2Fimages%2F2012%2F159999%2F2012031421243392.jpg">

 3.有参数方法调用
后台代码：

 [WebMethod] 
 public static string GetStr(string str, string str2) 
{ 
 return str + str2; 
}

 JS代码：

AJAX 调用后台的方法" alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" real_src="http://common.cnblogs.com/images/copycode.gif">

 $(function() { 
$("#btnOK").click(function() { 
$.ajax({ 
type: "Post", 
url: "demo.aspx/GetStr", 
 //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字 
data: "{'str':'我是','str2':'XXX'}", 
contentType: "application/json; charset=utf-8", 
dataType: "json", 
success: function(data) { 
 //返回的数据用data.d获取内容 
alert(data.d); 
}, 
error: function(err) { 
alert(err); 
} 
}); 
 
 //禁用按钮的提交 
 return false; 
}); 
});

AJAX 调用后台的方法" alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" real_src="http://common.cnblogs.com/images/copycode.gif">

 运行效果如下：

AJAX 调用后台的方法" alt="" src="https://pic002.cnblogs.com/images/2012/159999/2012031421264324.jpg" real_src="http://pic002.cnblogs.com/images/2012/159999/2012031421264324.jpg" action-type="show-slide" action-data="http%3A%2F%2Fpic002.cnblogs.com%2Fimages%2F2012%2F159999%2F2012031421264324.jpg">

4.返回数组方法
后台代码：

AJAX 调用后台的方法" alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" real_src="http://common.cnblogs.com/images/copycode.gif">

 [WebMethod] 
 public static List<<span style="margin: 0px; padding: 0px; font-family: 'Courier New'; color: rgb(0, 0, 255); ">string> GetArray() 
{ 
List<<span style="margin: 0px; padding: 0px; font-family: 'Courier New'; color: rgb(0, 0, 255); ">string> li = new List<<span style="margin: 0px; padding: 0px; font-family: 'Courier New'; color: rgb(0, 0, 255); ">string>(); 
 
 for (int i = 0; i < 10; i++) 
li.Add(i + ""); 
 
 return li; 
}

AJAX 调用后台的方法" alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" real_src="http://common.cnblogs.com/images/copycode.gif">

JS代码：

AJAX 调用后台的方法" alt="复制代码" src="https://common.cnblogs.com/images/copycode.gif" real_src="http://common.cnblogs.com/images/copycode.gif">

 $(function() { 
$("#btnOK").click(function() { 
$.ajax({ 
type: "Post", 
url: "demo.aspx/GetArray", 
contentType: "application/json; charset=utf-8", 
dataType: "json", 
success: function(data) { 
 //插入前先清空ul 
$("#list").html(""); 
 
 //递归获取数据 
$(data.d).each(function() { 
 //插入结果到li里面 
$("#list").append("