Django前端更新按钮失效求助（Admin面板功能正常）

一、当前AJAX代码的直接问题 #

前端用fetch提交的JSON里字段是submission_id，但后端视图里写的是data["subId"]，参数名不匹配，导致找不到要修改的提交记录，这就是功能失效的核心原因。

直接修改views.py里的对应行：

# 把原来的subId改成submission_id
submission_id = data["submission_id"]

二、更简单的非AJAX方案（符合你不想用AJAX的需求） #

既然觉得AJAX复杂，完全可以用Django原生表单提交，不用写任何JS代码，步骤如下：

1. 修改HTML模板 #

删掉form上的data属性，给表单设置正确的提交地址，用隐藏字段传递submission_id，同时去掉所有JS代码：

{% extends "base/room_home.html" %}

{% block content %}

<div class="container d-flex align-items-center justify-content-center" style="min-height: 100vh;">
    <div class="text-center">
        <h1>{{ room_bills.title }}</h1>
        <p>截止日期: {{ room_bills.due }}</p>

        <div class="col-3">
            <h3>已缴费成员: </h3>
            <ul>
                {% for submission in submissions %}
                    <li>
                        <a href="proof/{{ submission.user.id }}" target="_blank">{{ submission.user.username }}</a>
                        <form method="POST" action="{% url 'remark_proof_api' room_bills.room.id room_bills.slug %}">
                            {% csrf_token %}
                            <input type="hidden" name="submission_id" value="{{ submission.id }}">
                            <select name="status">
                                <option value="P" {% if submission.status == 'P' %}selected{% endif %}>待审核</option>
                                <option value="A" {% if submission.status == 'A' %}selected{% endif %}>已通过</option>
                                <option value="R" {% if submission.status == 'R' %}selected{% endif %}>已拒绝</option>
                            </select>
                            <button type="submit" class="btn btn-primary">更新</button>
                        </form>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="col-3">
            <h3>未缴费成员: </h3>
            <ul>
                {% for user in did_not_submit %}
                    <li>{{ user.username }}</li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>

{% endblock %}

2. 调整后端视图 #

去掉@csrf_exempt（原生表单已经带了csrf_token，不需要豁免），直接从POST表单里取数据，修改后重定向回原页面：

from django.shortcuts import redirect

def remark_proof_api(request, room_id, bills_slug):
    if request.method == "POST":
        submission_id = request.POST.get("submission_id")
        status = request.POST.get("status")

        sub = Submission.objects.get(id=int(submission_id))
        sub.status = status
        sub.save()

        # 提交后回到原来的页面，默认跳转首页防止空值
        return redirect(request.META.get('HTTP_REFERER', '/'))
    return redirect(request.META.get('HTTP_REFERER', '/'))

3. 确认URL配置 #

确保你的urls.py里有对应的路由，名称要和模板里的{% url %}一致：

# urls.py示例
from django.urls import path
from . import views

urlpatterns = [
    # 其他路由...
    path('room/<int:room_id>/bills/<slug:bills_slug>/status/', views.remark_proof_api, name='remark_proof_api'),
]

这样修改后，点击「更新」按钮就会直接提交表单，修改状态后自动回到原页面，完全不需要AJAX，逻辑简单，也解决了原来的功能失效问题。

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