Django API开发遇GET/POST 404错误，求解决方案

核心问题定位 #

请求URL里出现undefined，说明你的JavaScript代码没有正确获取到文章的post_id值，导致请求路径拼接错误，无法匹配Django路由里的edit/<int:post_id>规则。

具体排查与修复步骤 #

1. 检查HTML循环中ID的传递 #

确保HTML模板的for循环里正确渲染每个post的ID，推荐两种方式：

• 直接用Django URL标签生成表单路径：

{% for post in posts %}
  <form action="{% url 'edit' post.id %}" method="post">
    <!-- 表单内容 -->
    {% csrf_token %}
    <button type="submit">保存编辑</button>
  </form>
{% endfor %}

这种方式无需JS拼接，直接生成符合路由规则的完整路径，从根源避免ID传递错误。

• 给交互元素绑定data属性：

{% for post in posts %}
  <button class="edit-btn" data-post-id="{{ post.id }}">编辑文章</button>
{% endfor %}

通过data-post-id把ID存储在按钮上，方便JS后续获取。

2. 修复JavaScript的ID获取与URL拼接逻辑 #

如果使用AJAX发起请求，要确保正确从HTML元素中提取ID：

// 给所有编辑按钮绑定点击事件
document.querySelectorAll('.edit-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 从data属性中获取ID
    const postId = this.dataset.postId;
    // 先校验ID是否存在
    if (!postId) {
      console.error('未获取到有效的文章ID');
      return;
    }
    // 拼接正确的请求URL
    const requestUrl = `/edit/${postId}`;
    // 发起GET请求示例
    fetch(requestUrl, {
      method: 'GET',
      headers: {
        'X-CSRFToken': getCookie('csrftoken') // 别忘了CSRF令牌
      }
    })
    .then(response => response.json())
    .catch(err => console.error('请求失败:', err));
  });
});

// 辅助函数：获取CSRF令牌（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;
}

• 避免从未初始化的变量中获取ID，比如直接使用let postId = document.getElementById('some-id').value，要确保元素存在且值有效。
• 循环渲染的元素不要使用重复ID，否则JS只能获取到第一个元素的值，导致后续元素的ID为undefined。

3. 验证Django视图与路由的匹配 #

确保视图函数正确接收post_id参数：

from django.http import JsonResponse
from .models import Post

def edit(request, post_id):
    try:
        post = Post.objects.get(id=post_id)
    except Post.DoesNotExist:
        return JsonResponse({'error': '文章不存在'}, status=404)
    
    if request.method == 'GET':
        # 返回文章数据供前端编辑
        return JsonResponse({'title': post.title, 'content': post.content})
    elif request.method == 'POST':
        # 处理编辑后的提交逻辑
        post.title = request.POST.get('title')
        post.content = request.POST.get('content')
        post.save()
        return JsonResponse({'success': True})

路由中的<int:post_id>会自动将整数类型的ID传递给视图，视图必须声明这个参数才能接收。

4. 快速排查小技巧 #

• 在JS中获取ID后先打印console.log(postId)，确认它是有效的整数，再发起请求。
• 检查HTML模板中是否拼写错误，比如把post.id写成post.post_id（取决于你的models.py中主键字段名）。
• 查看页面渲染后的HTML源码，确认每个编辑按钮/表单的路径或data属性是否正确渲染了ID。

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