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

标签: jquery  调用

前几篇写了如何编写实现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键看 结果。

原文链接:加载失败,请重新获取