Jquery Ajax学习实例5 向WebService发出请求，返回泛型集合数据的异步调用

2023年6月11日上午11:42 • JavaScript

一、什么是jQuery Ajax？

jQuery Ajax是一组用于处理Ajax请求的方法和函数。通过它可以实现异步获取数据和处理数据的功能，可以向服务器发送请求以及在不刷新页面的情况下接收来自服务器的响应数据，从而实现网页动态更新的效果。

二、向WebService发出请求，返回泛型集合数据的异步调用

在使用jQuery Ajax与Web Service交互时，需要了解WebService的URL地址，在本文中，WebService的URL地址为：http://localhost:8080/WebService.asmx/GetStudentList。下面是实现代码：

引入jQuery库

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery Ajax</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="content">
        <!-- 显示数据的容器 -->
    </div>
</body>
</html>

发送Ajax请求

$(function () {
    //定义WebService地址
    var webServiceUrl = "http://localhost:8080/WebService.asmx/GetStudentList";
    //发送Ajax请求
    $.ajax({
        type:"post", //请求方式
        url:webServiceUrl, //WebService地址
        dataType:"json", //返回数据的格式
        success:function (data) {
            //请求成功
            if (data.d !== "") {
                var result = JSON.parse(data.d);
                //显示数据
                $.each(result, function (index, item) {
                    $("#content").append("<p>" + "学生姓名：" + item.Name + "，年龄：" + item.Age + "</p>");
                });
            }
        },
        error:function () {
            //请求失败
            alert("请求失败！");
        }
    });
});

接收Web Service返回的泛型集合数据

在Web Service中，我们需要定义一个返回类型为泛型集合的方法，如下所示：

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string GetStudentList()
{
    List<Student> list = new List<Student>();
    list.Add(new Student() { Name = "张三", Age = 18 });
    list.Add(new Student() { Name = "李四", Age = 20 });
    list.Add(new Student() { Name = "王五", Age = 22 });
    return JsonConvert.SerializeObject(list);
}

其中，Student类的定义如下：

public class Student
{
    public string Name { get; set; }
    public int Age { get; set; }
}

四、示例说明

示例一：获取Web Service中的字符串类型返回值

在Web Service中，我们需要定义一个返回类型为字符串的方法，如下所示：

[WebMethod]
public string HelloWorld()
{
    return "Hello World!";
}

在前端代码中，我们需要将dataType的值修改为text，如下所示：

$.ajax({
    type:"post", //请求方式
    url:webServiceUrl, //WebService地址
    dataType:"text", //返回数据的格式
    success:function (data) {
        //请求成功，data即为Web Service返回的字符串
    },
    error:function () {
        //请求失败
        alert("请求失败！");
    }
});

示例二：向Web Service发送POST请求

在前端代码中，我们需要将type的值修改为post，如下所示：

$.ajax({
    type:"post", //请求方式
    url:webServiceUrl, //WebService地址
    dataType:"json", //返回数据的格式
    data:{"id":1}, //POST请求时携带的参数
    success:function (data) {
        //请求成功，data即为Web Service返回的数据
    },
    error:function () {
        //请求失败
        alert("请求失败！");
    }
});

在Web Service中，我们需要通过Request对象获取客户端传递的参数，如下所示：

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string GetStudentById(int id)
{
    //通过id获取学生信息
    return JsonConvert.SerializeObject(new Student() { Name = "张三", Age = 18 });
}

通过以上示例可以很清楚的了解如何使用jQuery Ajax向WebService发出请求，返回泛型集合数据的异步调用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Jquery Ajax学习实例5 向WebService发出请求，返回泛型集合数据的异步调用 - Python技术站