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'),