[Ajax]ajax学习与理解

3.无参数的方法调用.

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

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

JS代码：

$(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; 
 }); 
}); 

页面代码：

 form id="form1" runat="server" 
 div 
 asp:Button ID="btnOK" runat="server" Text="验证用户" / 
 /div 
 /form 

运行效果如下： 

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

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

JS代码：

$(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; 
 }); 
}); 

运行效果如下：

[WebMethod] 
public static List string GetArray() 
{ 
 List string li = new List string 

for (int i = 0; i 10; i++) 
 li.Add(i + ""); 

return li; 
} 

$(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(" li " + this + " /li "); 
 }); 

 alert(data.d); 
 }, 
 error: function(err) { 
 alert(err); 
 } 
 }); 

//禁用按钮的提交 
 return false; 
 }); 
});