使用jquery 调用asp.net开发的webapi

最新推荐文章于 2021-05-08 16:50:31 发布

winfredzhang

最新推荐文章于 2021-05-08 16:50:31 发布

阅读量398

点赞数

分类专栏： ASP.NET web开发 webapi 文章标签： jquery 调用

本文链接：https://blog.csdn.net/winniezhang/article/details/103448189

版权

web开发同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

ASP.NET

16 篇文章 0 订阅

订阅专栏

webapi

10 篇文章 0 订阅

订阅专栏

前几篇写了如何编写实现webapi从sqlserver中的employee表中读取数据的功能。

但是问题来了，如何将这些数据显示在网页上呢？

废话少说，上代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <script src="Scripts/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var ulEmployees = $('#ulEmployees');

            $('#btn').click(function () {
                $.ajax({
                    type: 'GET',
                    url: 'api/Employees',
                    datatype: 'json',
                    success: function (data) {
                        ulEmployees.empty();
                        $.each(data, function (index, val) {
                            var fullName = val.FirstName + ' ' + val.LastName;
                            ulEmployees.append('<li>' + fullName + '</li>');
                        });
                    }
                });
            });

            $('#btnclear').click(function () {
                ulEmployees.empty();
            });
        });
    </script>

</head>
<body>
    <input id="btn" input type="button" value="Get All Employees">
    <input id="btnclear" input type="button" value=" Clear Employees">
    <ul id="ulEmployees"></ul>
</body>
</html>

按F5键看结果。

winfredzhang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用jquery 调用asp.net开发的webapi

前几篇写了如何编写实现webapi从sqlserver中的employee表中读取数据的功能。但是问题来了，如何将这些数据显示在网页上呢？废话少说，上代码。<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title>...
复制链接

扫一扫

专栏目录