AJAX——头条-数据管理平台项目

以下是使用AJAX技术实现的黑马头条数据管理平台的核心功能代码示例：

// 获取新闻列表
function getNewsList() {
    $.ajax({
        url: '/api/news/list', // 后端API接口
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            if (data.code === 200) {
                // 假设data.data是一个数组，包含了所有新闻数据
                renderNewsList(data.data);
            } else {
                alert('获取新闻列表失败: ' + data.message);
            }
        },
        error: function(xhr, type) {
            alert('AJAX请求失败');
        }
    });
}
 
// 渲染新闻列表到页面
function renderNewsList(newsList) {
    var listHtml = '';
    newsList.forEach(function(news) {
        listHtml += '<li>' + news.title + '</li>';
    });
    $('#newsList').html(listHtml);
}
 
// 删除新闻
function deleteNews(newsId) {
    $.ajax({
        url: '/api/news/delete',
        type: 'POST',
        data: { id: newsId },
        dataType: 'json',
        success: function(data) {
            if (data.code === 200) {
                alert('新闻删除成功');
                getNewsList(); // 重新加载新闻列表
            } else {
                alert('删除新闻失败: ' + data.message);
            }
        },
        error: function(xhr, type) {
            alert('AJAX请求失败');
        }
    });
}
 
// 初始化页面加载完成后执行的操作
$(document).ready(function() {
    getNewsList(); // 获取并渲染新闻列表
});

这段代码展示了如何使用AJAX技术从服务器获取新闻列表，并渲染到页面上。同时，也展示了如何使用AJAX删除一条新闻，并在操作成功后重新加载新闻列表。这是一个典型的前后端分离项目中前端与API交互的场景。