Django使用AJAX向服务器发起请求的操作方法

<table class="table table-hover">
    <tr>
        <td>序号</td>
        <td>栏目名称</td>
        <td>操作</td>
    </tr>
    {% for column in columns %}
    <tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ column.column }}</td>
        <td>
            <a name="edit" href="javascript:" rel="external nofollow"  rel="external nofollow"  onclick="edit_column(this, {{ column.id }})">
                <span class="fas fa-pencil-alt"></span>
            </a>
            <a name="delete" href="javascript:" rel="external nofollow"  rel="external nofollow"  onclick="del_column(this, {{ column.id }})">
                <span class="fas fa-trash-alt" style="margin-left: 20px;"></span>
            </a>
        </td>
    </tr>
    {% empty %}
    <p>还没有设置栏目，太懒了。</p>
    {% endfor %}
    </table>

<script>
    function edit_column(element, columnId) {
        // 获取当前行的文档名称单元格
        const currentRow = element.closest('tr');
        const nameCell = currentRow.querySelector('td:nth-child(2)');
        // 获取当前文档名称
        const currentName = nameCell.textContent;
        // 弹出 Prompt 对话框，获取新的文档名称
        const newName = prompt('请输入新的栏目名称：', currentName);
        // 如果用户点击了确定并输入了新名称，更新表格中的文档名称
        if (newName !== null && newName.trim() !== '') {
            const trimmedName = newName.trim();
            // 发送 AJAX 请求更新数据库，在fetch后支出了提交的url，由该url确定由那个view函数处理提交
            fetch(`/article/update-column/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCookie('csrftoken')  // Django 的 CSRF token
                },
                body: JSON.stringify({
                                current_name: currentName,
                                new_name: trimmedName
                                }) //发送到后台的是一个字典，键current_name值是column的旧名称，键new_name值是column的新名称
            }).then(response => {
                if (response.ok) {
                    // 更新成功，更新表格中的文档名称
                    nameCell.textContent = trimmedName;
                    alert('栏目名称更新成功');
                } else {
                    // 更新失败，处理错误
                    alert('更新失败，请重试');
                }
            }).catch(error => {
                console.error('Error:', error);
                alert('更新失败，请重试');
            });
        }
    }
    function del_column(element, columnId) {
        // 实现删除功能的逻辑
        console.log('删除栏目 ID:', columnId);
    }
    // 获取 CSRF token 的函数（Django）
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
</script>

@csrf_exempt
@login_required
def update_column(request):
    if request.method == 'POST':
        try:
            data = json.loads(request.body)
            current_name = data.get('current_name') #提交数据字典中的current_name
            new_name = data.get('new_name') #提交数据字典中的new_name
            changed_column = ArticleColumn.objects.get(user = request.user, column=current_name)
            changed_column.column = new_name
            changed_column.save()
            return JsonResponse({'status': 'success'})
        except ArticleColumn.DoesNotExist:
            return JsonResponse({'status': 'error', 'message': 'ArticleColumn not found'}, status=404)
        except Exception as e:
            return JsonResponse({'status': 'error', 'message': str(e)}, status=500)
    return JsonResponse({'status': 'error', 'message': 'Invalid request method'}, status=400)

path('update-column/', views.update_column, name='update_column'),