jQuery调用ASP.NET的WebService

浏览数：16 / 时间：2015年06月09日

经常需要使用客户端脚本调用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的代码

[c-sharp] view plain copy

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中使用的实体类

[c-sharp] view plain copy

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代码部分

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery调用ASP.NET的WebService