jQuery实现从后端获取数据并渲染到页面

$(document).ready(function() {
    $.ajax({
        url: '/api/data', // 后端数据接口URL
        type: 'GET', // 请求方法
        dataType: 'json', // 预期服务器返回的数据类型
        success: function(response) {
            // 假设后端返回的是数组，遍历并渲染每个元素
            $.each(response, function(index, item) {
                // 假设渲染元素的方法是renderItem，需要自定义
                var html = renderItem(item);
                $('#container').append(html); // 将渲染好的HTML追加到页面上的某个容器中
            });
        },
        error: function(xhr, status, error) {
            // 错误处理
            console.error("An error occurred: " + status + "\nError: " + error);
        }
    });
 
    // 自定义的渲染函数，用于生成HTML字符串
    function renderItem(item) {
        // 根据item的结构和需求构建HTML字符串
        return '<div>' + item.property + '</div>';
    }
});

这段代码展示了如何使用jQuery的$.ajax方法从后端获取JSON数据，然后使用$.each遍历数据，并使用自定义的renderItem函数将每个数据项渲染成HTML字符串，最后将渲染好的HTML字符串追加到页面上的某个容器中。