jQuery調用ASP.NET的WebService

常常須要使用客戶端腳本調用net的WebService，比較經常使用的是在ScriptManager腳本管理器的環境下使用回調調用WebService的方法，但是這些必須在aspx的頁面中進行，不免有些限制。

   jQuery庫是咱們比較經常使用的JavaScript庫，入門簡單，功能強大，對Ajax的支持比較友好。使用jQuery調用net的WebService也是常常遇到的。現將常見調用類型總結以下：

 

   一、環境

        jQuery 1.3.2

        .net framework 2.0

        Asp.net ajax 1.0

   二、後臺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;
    }
}

 

 

   三、前臺顯示頁面調用

        這裏前臺頁面使用htm頁面來進行測試。

       一、無參數調用

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

              });

          });

 

      二、帶參數的調用

        

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

              });

          });

 

      三、返回複合類型        

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

              });

          });

 

      四、返回泛型集合        

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

                     }
                 });

              });

          });

 

      五、返回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>