jQuery - Ajax的使用详解(主要简单试做了两个案例)

$(document).ready(function(){
    // 案例1：使用Ajax获取服务器数据
    $('#fetch-btn').click(function(){
        $.ajax({
            url: 'https://api.myjson.com/bins/9inum', // 服务器提供的JSON数据接口
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                var output = '';
                $.each(data, function(key, value) {
                    output += '<li>' + key + ': ' + value + '</li>';
                });
                $('#data-list').html(output);
            },
            error: function() {
                alert('获取数据失败！');
            }
        });
    });
 
    // 案例2：使用Ajax提交表单数据
    $('#submit-btn').click(function(){
        $.ajax({
            url: 'https://www.example.com/submit-form', // 假设的表单提交地址
            type: 'POST',
            data: {
                name: $('#name').val(),
                email: $('#email').val(),
                message: $('#message').val()
            },
            dataType: 'json',
            success: function(response) {
                alert('表单提交成功！');
            },
            error: function() {
                alert('表单提交失败！');
            }
        });
    });
});

这段代码展示了如何使用jQuery的$.ajax()方法来进行简单的GET和POST请求。第一个案例是获取服务器上的JSON数据，并将其以列表形式展示在页面上。第二个案例是提交表单数据到服务器，并在成功提交后显示相应的消息。这些操作都是异步进行的，不会阻塞用户的其他操作。