03：从无到有编写功能

2024/8/1 13:32:45

x
<script>
// 编辑班级按钮点击事件
            $(document).on('click', '.editClassBtn', function () {
                const classId = $(this).data('id');
                // 处理编辑班级逻辑
                console.log('Edit class:', classId);
            });
</script>
上面代码没有写完整，请补足。

2024/8/1 13:32:45

x
好的，以下是完整的代码，用于处理编辑班级按钮的点击事件。这个代码将显示一个表单，允许用户编辑班级的详细信息，并在提交时调用`updateClass`函数来更新班级信息。

```javascript
<script>
// 编辑班级按钮点击事件
$(document).on('click', '.editClassBtn', function () {
    const classId = $(this).data('id');
    
    // 先获取当前班级的信息
    $.ajax({
        url: `${API_BASE_URL}/classes.php?class_id=${classId}`,
        method: 'GET',
        contentType: 'application/json',
        success: function (classData) {
            // 填充编辑表单
            $('#editClassId').val(classData.class_id);
            $('#editClassName').val(classData.class_name);
            $('#editClassDescription').val(classData.description);
            $('#editClassSemester').val(classData.semester);

            // 显示编辑模态框（假设你有一个模态框）
            $('#editClassModal').modal('show');
        },
        error: function () {
            console.error('Unable to fetch class data.');
        }
    });
});

// 提交编辑班级表单
$('#editClassForm').on('submit', function (event) {
    event.preventDefault(); // 防止默认表单提交

    const classData = {
        class_id: $('#editClassId').val(),
        class_name: $('#editClassName').val(),
        description: $('#editClassDescription').val(),
        semester: $('#editClassSemester').val()
    };

    updateClass(classData)
        .done(function (response) {
            console.log('Class updated successfully:', response);
            // 关闭模态框
            $('#editClassModal').modal('hide');
            // 刷新班级列表或进行其他操作
        })
        .fail(function (error) {
            console.error('Error updating class:', error);
        });
});
</script>
```

### 代码说明：

1. **点击事件**：
   - 当点击编辑班级按钮时，获取班级ID。
   - 通过GET请求获取班级的详细信息，并填充到编辑表单中。
   - 显示编辑模态框，允许用户编辑信息。

2. **表单提交**：
   - 当用户提交编辑表单时，阻止默认的表单提交行为。
   - 创建一个`classData`对象，包含用户输入的班级信息（包括`class_id`）。
   - 调用`updateClass`函数进行更新。
   - 如果更新成功，关闭模态框并可以选择刷新班级列表或执行其他操作。
   - 如果更新失败，打印错误信息。

确保你在HTML中有一个模态框和相应的输入字段，以及一个提交的按钮，匹配上面的ID（如`editClassModal`、`editClassForm`等）。这样用户就可以编辑班级信息。