Saya baru di Ajax. Mencoba mengambil data JSON yang dikembalikan dari Dapatkan webAPI dari pengontrol tetapi pada tombol klik tidak ada rendering pada Tampilan.

Seperti inilah tampilan saya

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var ulEmployees = $('#ulEmployees');
            $('#btn').click(function () {
                    var id = $(this).attr(id);
                $.ajax({
                    url: '/api/employee', type: "GET", dataType: "json",
                    data: { id: id },
                    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" type="button" value="Get All Employees" />
    <input id="btnClear" type="button" value="Clear" />
    <ul id="ulEmployees"></ul>
</body>
</html>

Ini adalah data JSON yang dikembalikan oleh webapimasukkan deskripsi gambar di sini ajax asp.net-core

1
DevSay 29 Mei 2020, 10:10

1 menjawab

Jawaban Terbaik

Di bawah ini harus berfungsi:

    $(document).ready(function () {
    var ulEmployees = $('#ulEmployees');
    $('#btn').click(function () {
        var id = $(this).attr('id');
        fetch('/api/employee?id=' + id)
        .then((resp) => resp.json())
        .then(function(data) {
        ulEmployees.empty();
            $.each(data, function (index, val) {
                var fullName = val.firstName + ' ' + val.lastName;
                ulEmployees.append('<li>' + fullName + '</li>');
            });
        })
        .catch(function(error) {
            console.log(error);
        });

    });
});
1
DevSay 29 Mei 2020, 10:49