AJAX

<script>
    <!--文档就绪事件-->
    $(function () {
        // 添加btn1的点击事件
        $('#btn1').click(function () {
            // 保存的是请求相关的配置.
            var setting = {
                url: 'http://localhost:8080/ajax',
                method: 'post',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: {
                    username: 'risky',
                    password: 'pass78990'
                }
            };
            // done()中传递一个回调函数.
            // 请求发送之后,接收到响应,该函数就会执行.
            $.ajax(setting).done(requestFinished);
        });


        // 添加btn2的点击事件
        $('#btn2').click(function () {
            // 保存的是请求相关的配置.
            var data = {
                username: 'risky2313dsa23',
                password: 'pass789dsad90'
            };
            var setting = {
                url: 'http://localhost:8080/ajax',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json'
                },
                // 把对象转出json数据.
                data: JSON.stringify(data)
            };
            $.ajax(setting).done(requestFinished);
        });


        // 添加btn3的点击事件
        $('#btn3').click(function () {
            let url = "http://localhost:8080/ajax";
            $.get(url, requestFinished);
        });


        // 添加btn4的点击事件
        $('#btn4').click(function () {
            let url = "http://localhost:8080/ajax";
            let data = {
                id: 1,
                username: '李四',
                password: '666666'
            };
            $.post(url, JSON.stringify(data), requestFinished);
        })
        
    });

    /*
        第一个参数: 表示网络请求的结果.
        第二个参数: 便是网络请求是否成功.
     */
    function requestFinished(resp, success) {
        console.log(resp, success);
        if (success == 'success') {
            var body = $('#tbody');
            // 清除body原有的数据
            body.empty();
            for (var item of resp) {
                var tr = $('<tr></tr>');
                var id = $('<td></td>').text(item.id);
                var name = $('<td></td>').text(item.name);
                var age = $('<td></td>').text(item.age);
                tr.append(id);
                tr.append(name);
                tr.append(age);
                body.append(tr);
            }
        }
    }
</script>