jQuery调用ASP.NET的WebService

   经常需要使用客户端脚本调用net的WebService，比较常用的是在ScriptManager脚本管理器的环境下使用回调调用WebService的方法，可是这些必须在aspx的页面中进行，难免有些限制。

   jQuery库是我们比较常用的JavaScript库，入门简单，功能强大，对Ajax的支持比较友好。使用jQuery调用net的WebService也是经常遇到的。现将常见调用类型总结如下：

 

   1、环境

        jQuery 1.3.2

        .net framework 2.0

        Asp.net ajax 1.0

   2、后台WebService的代码

   using System; using System.Collections; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Xml.Linq; using System.Text; using System.Collections.Generic; using System.Data; /// <summary> ///WebService 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] //若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { public WebService() { //如果使用设计的组件，请取消注释以下行 //InitializeComponent(); } [WebMethod] public string HelloWorld() { return "Hello World"; } [WebMethod] public string HelloWorld(string userName) { StringBuilder sb = new StringBuilder(); for (int i = 0; i < 100; i++) { sb.AppendLine("<del>Hello World "+i+"<br /></del>"); } return sb.ToString(); } [WebMethod] public StudentInfo GetClass() { StudentInfo s = new StudentInfo(); s.StuName = "Accp 4.0"; s.Id = 1; return s; } [WebMethod] public List<StudentInfo> GetList() { return (new StudentInfo()).GetList(); } [WebMethod] public DataSet GetDataSet() { return (new StudentInfo()).GetDataSet(); } }  

 

   WebService中使用的实体类

   using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Collections.Generic; /// <summary> ///StudentInfo 的摘要说明 /// </summary> public class StudentInfo { public StudentInfo() { } private string m_stuName; public string StuName { get { return m_stuName; } set { m_stuName = value; } } private int m_id; public int Id { get { return m_id; } set { m_id = value; } } public DataSet GetDataSet() { DataSet ds = new DataSet(); DataTable dt = new DataTable(); dt.Columns.Add("Name"); dt.Columns.Add("Id"); for (int i = 0; i < 55; i++) { DataRow row = dt.NewRow(); row["Name"] = "Hello World" + i; row["Id"] = i; dt.Rows.Add(row); } ds.Tables.Add(dt); return ds; } public List<StudentInfo> GetList() { List<StudentInfo> list = new List<StudentInfo>(); for (int i = 0; i < 55; i++) { StudentInfo s = new StudentInfo(); s.StuName = "Hello World" + i; s.Id = i; list.Add(s); } return list; } }  

 

   3、前台显示页面调用

        这里前台页面使用htm页面来进行测试。

       1、无参数调用

         $(document).ready(function() {
            $('#Button1').click(function() {
                $.ajax({
                    type: "POST",   //访问WebService使用Post方式请求
                    contentType: "application/json", //WebService 会返回Json类型
                    url: "../WebService.asmx/HelloWorld", //调用WebService的地址和方法名称组合---WsURL/方法名
                    data: "{}",         //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到      
                    dataType: 'json',
                    success: function(result) {     //回调函数，result，返回值

                           alert(result.d);
                     }
                });

              });

          });

 

      2、带参数的调用

        

         $(document).ready(function() {
            $('#Button1').click(function() {
                $.ajax({
                    type: "POST",   //访问WebService使用Post方式请求
                    contentType: "application/json", //WebService 会返回Json类型
                    url: "../WebService.asmx/HelloWorld", //调用WebService的地址和方法名称组合---WsURL/方法名
                    data: "{userName:'alpha'}", 
                    dataType: 'json',
                    success: function(result) {     //回调函数，result，返回值

                           alert(result.d);
                    }
                });

              });

          });

 

      3、返回复合类型        

         $(document).ready(function() {
            $('#Button1').click(function() {
                $.ajax({
                    type: "POST",   //访问WebService使用Post方式请求
                    contentType: "application/json", //WebService 会返回Json类型
                    url: "../WebService.asmx/GetClass", //调用WebService的地址和方法名称组合---WsURL/方法名
                    data: "{}",
                    dataType: 'json',
                    success: function(result) {     //回调函数，result，返回值

                           alert(result.d["StuName"]);
                    }
                });

              });

          });

 

      4、返回泛型集合        

         $(document).ready(function() {
            $('#Button1').click(function() {
                $.ajax({
                    type: "POST",   //访问WebService使用Post方式请求
                    contentType: "application/json", //WebService 会返回Json类型
                    url: "../WebService.asmx/GetList", //调用WebService的地址和方法名称组合---WsURL/方法名
                    data: "{}",
                    dataType: 'json',
                    success: function(result) {     //回调函数，result，返回值

                           $(result.d).each(function(){
                                $("#result").append(this["Id"]+" "+this["StuName"]+"<br />");
                            });                   

                     }
                 });

              });

          });

 

      5、返回DataSet(xml格式)

         $(document).ready(function() {
            $('#Button1').click(function() {
                $.ajax({
                    type: "POST",   //访问WebService使用Post方式请求
                    url: "../WebService.asmx/GetDataSet", //调用WebService的地址和方法名称组合---WsURL/方法名
                    data: "{}",
                    dataType: "xml",
                    success: function(result) {     //回调函数，result，返回值

                            $(result).find("Table1").each(function() {
                                $('#result').append($(this).find("Id").text() + " " + $(this).find("Name").text()+"<br />");
                            });               

                     }
                 });

              });

          });

     

      显示动画效果

      $(document).ready(function(){

            $('#loading').ajaxStart(function() {
                $(this).show();
            }).ajaxStop(function() {
                $(this).hide();
            });

      });

  

 

      HTML代码部分

     <input id="Button1" type="button" value="Invoke" />
     <div id="result">
        <img id="loading" style="display: none;" alt="loading" src="../images/loading.gif" />
     </div>