使用JavaScript的fetch POST向Django后端重复提交数据问题求助

无限重复提交的核心原因是你的testPost函数被反复触发执行，结合你的场景，给你几个针对性的解决步骤：

1. 给提交动作加触发条件，避免全局自动执行 #

从你的HTML和脚本情况来看，大概率是脚本里直接全局调用了testPost()，导致页面加载就执行提交，而如果请求处理后页面意外刷新（比如Django视图返回了页面而非JSON），就会形成「加载→提交→刷新→再加载」的循环。

解决：给提交加手动触发逻辑，比如用按钮点击：

• 修改HTML，添加提交按钮：

<button id="submitBtn">提交数据</button>
<script src="script.js"></script>

• 修改script.js，把提交函数绑定到按钮点击事件：

const testPost = () => {
    fetch('http://127.0.0.1:8000/mysite/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            // 必须携带Django的CSRF Token，否则POST请求会被拦截
            'X-CSRFToken': getCsrfToken()
        },
        body: JSON.stringify({
            'player1Hp': 30,
            'player2Hp': 20
        })
    })
    .then(res => {
        if (!res.ok) throw new Error(`请求失败：${res.status}`);
        return res.json()
    })
    .then(data => console.log('提交成功：', data))
    .catch(error => console.log('错误：', error))
}

// 辅助函数：获取Django生成的CSRF Token
function getCsrfToken() {
    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.startsWith('csrftoken=')) {
                cookieValue = decodeURIComponent(cookie.substring(10));
                break;
            }
        }
    }
    return cookieValue;
}

// 只有点击按钮才执行提交
document.getElementById('submitBtn').addEventListener('click', testPost);

2. 确保Django视图正确返回JSON响应 #

如果你的Django视图返回的是页面模板（比如用render）而非JSON，会导致页面刷新，进而重复加载脚本执行提交。修改视图确保返回JSON：

from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['POST'])
def mysite_view(request):
    # 处理提交的数据，比如保存到数据库
    player1_hp = request.data.get('player1Hp')
    player2_hp = request.data.get('player2Hp')
    # 这里写你的数据库保存逻辑
    # ...
    
    # 返回JSON响应，状态码用201表示创建成功
    return Response({
        'status': 'success',
        'player1Hp': player1_hp,
        'player2Hp': player2_hp
    }, status=201)

3. 排查是否有意外的重复触发逻辑 #

检查你的完整script.js，确认有没有把testPost绑定到scroll、resize这类高频触发的事件，或者有没有用setInterval这类定时器反复调用它。如果有，移除这些错误绑定即可。

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