08：编写ajax

2024/8/1 13:32:45 avatar_7


你还记得我前面的API么？根据之前的API编写全部对应的ajax，封装成方法写道script.js文件中。编写对应的代码，给出详细的中文使用注释。

2024/8/1 13:32:45 gpt


好的，以下是根据之前的API编写的所有AJAX请求，并封装到一个独立的 `script.js` 文件中，附带详细的中文注释。

### script.js
```javascript
// script.js
<script>
// 定义 API 端点
const API_BASE_URL = 'http://yourdomain.com/api';

// AJAX 请求封装成方法

/**
 * 获取用户列表
 * @returns {Promise} 包含用户列表的 Promise 对象
 */
function getUsers() {
    return $.ajax({
        url: `${API_BASE_URL}/users`,
        method: 'GET'
    });
}

/**
 * 创建新用户
 * @param {Object} user 新用户对象
 * @returns {Promise} 包含创建结果的 Promise 对象
 */
function createUser(user) {
    return $.ajax({
        url: `${API_BASE_URL}/users`,
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(user)
    });
}

/**
 * 删除用户
 * @param {number} userId 用户 ID
 * @returns {Promise} 包含删除结果的 Promise 对象
 */
function deleteUser(userId) {
    return $.ajax({
        url: `${API_BASE_URL}/users/${userId}`,
        method: 'DELETE'
    });
}

/**
 * 获取班级列表
 * @returns {Promise} 包含班级列表的 Promise 对象
 */
function getClasses() {
    return $.ajax({
        url: `${API_BASE_URL}/classes`,
        method: 'GET'
    });
}

/**
 * 创建新班级
 * @param {Object} classData 新班级对象
 * @returns {Promise} 包含创建结果的 Promise 对象
 */
function createClass(classData) {
    return $.ajax({
        url: `${API_BASE_URL}/classes`,
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(classData)
    });
}

/**
 * 删除班级
 * @param {number} classId 班级 ID
 * @returns {Promise} 包含删除结果的 Promise 对象
 */
function deleteClass(classId) {
    return $.ajax({
        url: `${API_BASE_URL}/classes/${classId}`,
        method: 'DELETE'
    });
}

/**
 * 获取课程列表
 * @returns {Promise} 包含课程列表的 Promise 对象
 */
function getCourses() {
    return $.ajax({
        url: `${API_BASE_URL}/courses`,
        method: 'GET'
    });
}

/**
 * 创建新课程
 * @param {Object} courseData 新课程对象
 * @returns {Promise} 包含创建结果的 Promise 对象
 */
function createCourse(courseData) {
    return $.ajax({
        url: `${API_BASE_URL}/courses`,
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(courseData)
    });
}

/**
 * 删除课程
 * @param {number} courseId 课程 ID
 * @returns {Promise} 包含删除结果的 Promise 对象
 */
function deleteCourse(courseId) {
    return $.ajax({
        url: `${API_BASE_URL}/courses/${courseId}`,
        method: 'DELETE'
    });
}

/**
 * 获取视频列表
 * @returns {Promise} 包含视频列表的 Promise 对象
 */
function getVideos() {
    return $.ajax({
        url: `${API_BASE_URL}/videos`,
        method: 'GET'
    });
}

/**
 * 上传新视频
 * @param {FormData} videoData 新视频表单数据
 * @returns {Promise} 包含上传结果的 Promise 对象
 */
function uploadVideo(videoData) {
    return $.ajax({
        url: `${API_BASE_URL}/videos`,
        method: 'POST',
        data: videoData,
        processData: false,
        contentType: false
    });
}

/**
 * 删除视频
 * @param {number} videoId 视频 ID
 * @returns {Promise} 包含删除结果的 Promise 对象
 */
function deleteVideo(videoId) {
    return $.ajax({
        url: `${API_BASE_URL}/videos/${videoId}`,
        method: 'DELETE'
    });
}

/**
 * 获取评论列表
 * @returns {Promise} 包含评论列表的 Promise 对象
 */
function getComments() {
    return $.ajax({
        url: `${API_BASE_URL}/comments`,
        method: 'GET'
    });
}

/**
 * 删除评论
 * @param {number} commentId 评论 ID
 * @returns {Promise} 包含删除结果的 Promise 对象
 */
function deleteComment(commentId) {
    return $.ajax({
        url: `${API_BASE_URL}/comments/${commentId}`,
        method: 'DELETE'
    });
}

/**
 * 获取用户个人资料
 * @returns {Promise} 包含个人资料的 Promise 对象
 */
function getProfile() {
    return $.ajax({
        url: `${API_BASE_URL}/profile`,
        method: 'GET'
    });
}

/**
 * 更新用户个人资料
 * @param {Object} profileData 个人资料对象
 * @returns {Promise} 包含更新结果的 Promise 对象
 */
function updateProfile(profileData) {
    return $.ajax({
        url: `${API_BASE_URL}/profile`,
        method: 'PUT',
        contentType: 'application/json',
        data: JSON.stringify(profileData)
    });
}
    
</script>
```

在使用这些方法时，可以将它们导入到对应的 HTML 页面中，以下是一些示例：

### user_management.html (片段)
```html
<script src="path/to/script.js"></script>
<script>
    $(document).ready(function() {
        // 加载用户列表
        getUsers().then(function(users) {
            $('#userTableBody').empty();
            users.forEach(function(user) {
                $('#userTableBody').append(`
                    <tr>
                        <td>${user.user_id}</td>
                        <td>${user.username}</td>
                        <td>${user.email}</td>
                        <td>${user.role}</td>
                        <td>
                            <button class="btn btn-danger btn-sm deleteUserBtn" data-id="${user.user_id}">Delete</button>
                        </td>
                    </tr>
                `);
            });
        });

        // 创建新用户
        $('#createUserForm').on('submit', function(event) {
            event.preventDefault();
            const newUser = {
                username: $('#newUsername').val(),
                email: $('#newEmail').val(),
                role: $('#newRole').val()
            };

            createUser(newUser).then(function() {
                $('#createUserModal').modal('hide');
                location.reload();
            }).catch(function() {
                alert('Failed to create user. Please try again.');
            });
        });

        // 删除用户
        $(document).on('click', '.deleteUserBtn', function() {
            const userId = $(this).data('id');
            deleteUser(userId).then(function() {
                location.reload();
            }).catch(function() {
                alert('Failed to delete user. Please try again.');
            });
        });
    });
</script>
```

其他页面如 `class_management.html`、`course_management.html`、`video_management.html` 和 `comment_management.html` 也可以类似地使用封装好的方法进行数据加载和处理。这样，所有的 AJAX 请求都集中在一个地方，便于管理和维护。