jQuery调用ASP.NET Web Service
版权所有：基础软件工作室。作者：孙继磊。邮箱：sun.j.l.studio@gmail.com。文章转载请保持此版权信息并注明出处。
作者博客：博客园： http://www.cnblogs.com/FoundationSoft。CSDN博客：http://blog.csdn.net/FoundationSoft
jQuery调用Web Service很简单，使用方便，如果你以前用过ASP.NET Web Service和jQuery，你10分钟就可以做一个jQuery调用ASP.NET Web Service的例子。下面就来做。
（1）在ASP.NET中添加一个Web Service，就用默认名称吧，WebService1。
（2）在WebService1中添加2个方法，第一个方法返回1个Student对象，第二个方法返回一个Student列表，这两种返回对象在客户端处理时稍微有一点不一样，等会要说明。下面是代码。
namespace WebApplication1
{
/// <summary>
/// WebService1 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json)]
public Student oneStudent()
{
//看了几篇文章，都说用下面的方式，将对象序列化为json字符串，事实证明不必多此一举
//估计这些在旧版本的ASP.NET中需要这样做吧。
//return new JavaScriptSerializer().Serialize( Student.randomStudent());
//实际上，只需要直接返回对象即可，如下代码。
return Student.randomStudent();
}
[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json)]
public List<Student> manyStudens()
{
var t= Student.randomList(3);
//return new JavaScriptSerializer().Serialize(t);
return t;
}
}
}
（3）建一个页面（可以是html或者aspx都可），代码这么写
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#callWS').click(getStudent);
});
function getStudent() {
$.ajax({
url: "Webservice1.asmx/oneStudent",
type:"POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data:"{}",
error:showError,
success:test
}); //$.ajax
}; //$getStudent
function test(msg) {
var o = $('div#output');
var result = msg.d;
o.html("");
o.html("name=" + result.name + "; birth=" + result.dateOfBirth);
}
function showError(e1,e2) {
alert(e1);
alert(e2);
};
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="callWS" value="get one student" /><br/>
<div style="border:solid 1px green; height:200px; margin-top:30px;" id="output">
</div>
</div>
</form>
</body>
</html>
（4）在上面的Web Service中用到一个Student类，此类与Web Service及jQuery都没有关系，故将其放到最后，算是附录吧。代码如下。
public class Student
{
public string name { get; set; }
public DateTime dateOfBirth { get; set; }
public static Student randomStudent()
{
Random r = new Random(DateTime.Now.Second);
return randomStudent(r);
}
private static Student randomStudent(Random r)
{
Student s = new Student();
s.dateOfBirth = DateTime.Now.AddYears(0 - r.Next(20, 30));
s.dateOfBirth.AddMonths(r.Next(12));
s.dateOfBirth.AddDays(30);
s.name = "student" + r.Next(100);
return s;
}
public static List randomList(int n)
{
Random r = new Random(DateTime.Now.Second);
List list = new List();
for (int i = 0; i < n; i++)
{
list.Add(randomStudent(r));
}
return list;
}
}
运行结果：
