点击Datatable按钮更新数据时Axios无法传递Django路由所需主键ID如何解决

问题核心原因 #

你代码的核心错误出在Axios请求的URL拼接逻辑，以及Django后端PUT请求的数据解析逻辑，具体修改方案如下：

1. 修复URL拼接错误 #

Django模板标签{% url %}是在服务端渲染阶段执行的，此时前端JS的动态变量id还没有生成，直接在模板标签中拼接+id不会生效。
修改方案：
先在你的页面JS代码段最上方（Vue实例创建前）定义路由前缀：

// 先通过Django模板生成不含pk的路由前缀，把默认填充的0替换为空
const updateTodoBaseUrl = "{% url 'todospaapp:save_todo_update' pk=0 %}".replace('/0', '')

再修改Axios请求的url配置：

updateTodo: function(id) {
    axios({
        // 拼接实际的id值，注意结尾加斜杠避免Django重定向
        url: `${updateTodoBaseUrl}/${id}/`,
        method: 'put',
        data: {
            todo_text: this.input_todo
        },
        headers: {
            'X-CSRFToken': '{{ csrf_token }}'
        }
    }).then(response => {
        this.getTodos()
    })
}

2. 修复Django路由配置 #

给路由结尾添加斜杠，匹配Django默认的重定向规则，避免PUT请求被301重定向后丢失请求数据：

from django.urls import path
from . import views
from django.views.generic import TemplateView

app_name = 'todospaapp'

urlpatterns = [
    path('', views.index, name='index'),
    path('todos/', views.todos, name='todos'),
    path('save_todo/', views.save_todo, name='save_todo'),
    # 新增结尾斜杠
    path('save_todo_update/<int:pk>/', views.save_todo_update, name='save_todo_update'),
]

3. 修复后端PUT请求解析逻辑 #

原代码中JSONParser.parse(request)写法错误，需要先实例化JSONParser再调用解析方法：

def save_todo_update(request, pk):
    try:
        todoitem = TodoItem.objects.get(pk=pk)
    except TodoItem.DoesNotExist:
        return HttpResponse(status=404)

    if request.method == 'GET':
        serializer = TodoItemSerializer(todoitem)
        return JsonResponse(serializer.data)

    elif request.method == 'PUT':
        # 修正解析逻辑：先实例化JSONParser
        data = JSONParser().parse(request)
        # 若没有使用DRF的JSONParser，也可以直接用原生json解析：
        # import json
        # data = json.loads(request.body)
        serializer = TodoItemSerializer(todoitem, data=data)
        if serializer.is_valid():
            serializer.save()
            return JsonResponse(serializer.data)
        # 错误返回加上400状态码更规范
        return JsonResponse(serializer.errors, status=400)

额外校验点 #

确认你的TodoItemSerializer序列化类配置了todo_text字段的读写权限，避免字段校验不通过的问题。

内容的提问来源于stack exchange，提问作者Ul Ul Albab