fix：修复前端this undefined导致的无法选课问题

Html/apps/static/js/index.js

@@ -1,41 +1,53 @@
-function show_books(courses_data, user_selected_courses){
+function show_books(courses_data, user_selected_courses) {
     console.log(courses_data)
     console.log(user_selected_courses)
 }
-function show_course_details(course_id){
+function show_course_details(course_id) {
-    window.location.href = '/course/' + course_id 
+    window.location.href = '/course/' + course_id
 }
 
-function on_click_select_course(event){
+function on_click_select_course(event) {
     event.stopPropagation(); // 阻止事件冒泡
-    const courseId = event.currentTarget.getAttribute('data-course-id');
+    const button = event.currentTarget;
-    if (event.currentTarget.classList.contains("selected-button")) {alert('课程已选择'); return;}
+    const courseId = button.getAttribute('data-course-id');
+    if (!courseId) { alert('缺少课程ID'); return; }
+    if (button.classList.contains("selected-button")) { alert('课程已选择'); return; }
+    if (button.disabled) { return; }
+    button.disabled = true;
     fetch(`/select_course`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
-            'X-CSRFToken': '{{ csrf_token() }}' // 如果使用 CSRF 保护
         },
         body: JSON.stringify({ course_id: courseId })
     })
-    .then(response => response.json())
+        .then(async (response) => {
-    .then(data => {
+            let data = null;
-        if (data.success) {
+            try {
-            // 更新按钮样式或显示消息
+                data = await response.json();
-            this.classList.remove('select-button');
+            } catch (_) {
-            this.classList.add('selected-button');
+            }
-            this.textContent = '已选择';
+            if (!response.ok) {
+                throw new Error(data?.message || `请求失败(${response.status})`);
+            }
+            return data;
+        })
+        .then((data) => {
+            if (!data?.success) {
+                throw new Error(data?.message || '选择课程失败');
+            }
+            button.classList.remove('select-button');
+            button.classList.add('selected-button');
+            button.textContent = '已选课';
             alert('选择课程成功');
-        } else {
+        })
-            alert('选择课程失败');
+        .catch(error => {
-        }
+            console.error('Error:', error);
-    })
+            alert(error?.message || '选择课程失败');
-    .catch(error => {
+            button.disabled = false;
-        console.error('Error:', error);
+        });
-        alert('选择课程失败');
-    });
 }
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
 
-});
+});