jQuery如何调用ASP.NET的WebService

最新推荐文章于 2025-12-02 21:03:58 发布

最新推荐文章于 2025-12-02 21:03:58 发布 · 98 阅读

文章标签：

#ASP.net #WebService #.net #ASP #jQuery #ViewUI

本文介绍如何通过jQuery调用ASP.NET WebService，并提供详细的配置步骤及示例代码。

今天搞这个WebService的调用方式了，整了一下午怎么也出不来，愁死了。唉，晚上吃完饭回来上网查下才发现需要在WebApp里的Web.config里需要配置（以下第3步），默认不支持post 调用。唉，郁闷，看了很多jQuery如何调用ASP.NET的WebService的相关文章，就是没题这个配置。希望写文章的人，把代码贴全了，也希望网上转载别人文章的人别瞎转载了，你到低试验没有啊，不好使也转载，唉。不说了，写下我的步骤吧。

1、建立项目WebService和WebApp项目，如图所示

2、Service1.asmx代码为：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Data;

namespace WebService1

{

/// <summary>

/// Service1 的摘要说明

/// </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 Service1 : System.Web.Services.WebService

{

//无参方法

[WebMethod]

public string HelloWorld()

{

return "Hello World";

}

//有参方法1

[WebMethod]

public int Add(int a, int b)

{

return a + b;

}

//有参方法2

[WebMethod]

public int Sum(int x)

{

int sum = 0;

for (int i = 0; i <= x; i++)

{

sum += i;

}

return sum;

}

// 返回一个复合类型

[WebMethod]

public Student GetStudentByStuNo(string stuNo)

{

if(stuNo=="001")

return new Student { StuNo = "001", StuName = "张三" };

if(stuNo=="002")

return new Student { StuNo = "002", StuName = "李四" };

return null;

}

//返回返回泛型集合的

[WebMethod]

public List<Student> GetList()

{

List<Student> list = new List<Student>();

list.Add(new Student() { StuNo = "001", StuName = "张三" });

list.Add(new Student() { StuNo = "002", StuName = "李四" });

list.Add(new Student() { StuNo = "003", StuName = "王五" });

return list;

}

//返回DataSet

[WebMethod]

public DataSet GetDataSet()

{

DataSet ds = new DataSet();

DataTable dt = new DataTable();

dt.Columns.Add("StuNo", Type.GetType("System.String"));

dt.Columns.Add("StuName", Type.GetType("System.String"));

DataRow dr = dt.NewRow();

dr["StuNo"] = "001"; dr["StuName"] = "张三";

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["StuNo"] = "002"; dr["StuName"] = "李四";

dt.Rows.Add(dr);

ds.Tables.Add(dt);

return ds;

}

public class Student

{

public string StuNo { get; set; }

public string StuName { get; set; }

}

3、打开WebApp项目JqueryInvokeWebService里的web.config文件，在system.web节下面加上以下配置

</protocols>

</webServices>

4、Default.aspx代码为：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqueryInvokeWebService._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

// 1、调用无参数方法

$(document).ready(function() {

$('#Button1').click(function() {

$.ajax({

type: "POST", //访问WebService使用Post方式请求

contentType: "application/json", //WebService 会返回Json类型

url: "http://localhost:3152/Service1.asmx/HelloWorld", //调用WebService的地址和方法名称组合---WsURL/方法名

data: "{}", //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到

dataType: 'json',

success: function(result) { //回调函数，result，返回值

alert(result.d);

}

});

//2、调用带参数的方法

$(document).ready(function() {

$('#Button2').click(function() {

$.ajax({

type: "POST", //访问WebService使用Post方式请求

contentType: "application/json", //WebService 会返回Json类型

url: "http://localhost:3152/Service1.asmx/Add", //调用WebService的地址和方法名称组合---WsURL/方法名

data: "{a:3,b:4}", //注意参数名字要和WebService里的Add方法里参数名字一致，否则不得行

dataType: 'json',

success: function(result) { //回调函数，result，返回值

alert(result.d);

}

});

//3、调用复合类型的方法

$(document).ready(function() {

$('#Button3').click(function() {

$.ajax({

type: "POST", //访问WebService使用Post方式请求

contentType: "application/json", //WebService 会返回Json类型

url: "http://localhost:3152/Service1.asmx/GetStudentByStuNo", //调用WebService的地址和方法名称组合---WsURL/方法名

data: "{stuNo:'002'}",

dataType: 'json',

success: function(result) { //回调函数，result，返回值

alert("学号："+result.d["StuNo"] + ",姓名：" + result.d["StuName"]);

}

});

//4、调用返回泛型集合的方法

$(document).ready(function() {

$('#Button4').click(function() {

$.ajax({

type: "POST", //访问WebService使用Post方式请求

contentType: "application/json", //WebService 会返回Json类型

url: "http://localhost:3152/Service1.asmx/GetList", //调用WebService的地址和方法名称组合---WsURL/方法名

data: "{}",

dataType: 'json',

success: function(result) { //回调函数，result，返回值

$(result.d).each(function() {

$("#lbResult").append(this["StuNo"] + "," + this["StuName"] + "<br />");

});

}

});

// 5、调用返回DataSet(xml格式)的方法

$(document).ready(function() {

$('#Button5').click(function() {

$.ajax({

type: "POST", //访问WebService使用Post方式请求

url: "http://localhost:3152/Service1.asmx/GetDataSet", //调用WebService的地址和方法名称组合---WsURL/方法名

data: "{}",

dataType: "xml", //返回XML数据类型

success: function(result) { //回调函数，result，返回值

$(result).find("Table1").each(function() {

alert("学号：" + $(this).find("StuNo").text() + ",姓名：" + $(this).find("StuName").text());

$('#lbResult').append($(this).find("StuNo").text() + " " + $(this).find("StuName").text() + "<br />");

});

}

});

//显示动画效果

$(document).ready(function() {

$('#loading').ajaxStart(function() {

$(this).show();

}).ajaxStop(function() {

$(this).hide();

});

</script>

</head>

<body>

<div>