Django视图中POST与GET方法误用：点击按钮数据闪显后消失

你的问题根源其实很明确，我帮你拆解并给出针对性修复方案：

问题分析 #

1. 数据闪显消失：你的按钮包裹在<form>标签内，点击时会触发表单默认的POST提交行为，浏览器会直接刷新页面——这就导致你刚渲染出来的row_data瞬间被页面刷新冲掉，看起来就是闪了一下就没了。
2. 重复提交警告：你的视图函数只处理了POST请求逻辑，完全没考虑GET请求（而首次访问、刷新页面都是GET请求）。当你提交过一次POST请求后再刷新，浏览器会检测到之前的POST动作，就会弹出重复提交的警告。

方案一：快速修复（阻止表单默认提交+完善视图逻辑） #

这种方式改动最小，适合快速解决问题：

1. 修改前端JS，阻止表单默认提交

更新create_table.js，在点击事件里添加阻止默认行为的代码：

function create_table() {
    document.getElementById("place_for_table").innerHTML = row_data;
}

document.getElementById("create_table").onclick = function(e) {
    // 阻止表单的默认提交动作，避免页面刷新
    e.preventDefault();
    create_table();
}

2. 完善视图函数，处理GET请求

更新views.py，确保GET请求也能正常返回页面（首次访问/刷新时用）：

def create_table(request):
    row_data = ""
    if request.method == 'POST':
        row_data = "this is row data"
    # GET请求时返回空的row_data，页面只显示按钮；POST请求时返回数据
    context = {'row_data': row_data}
    return render(request, 'javascript/create_table.html', context)

这样修改后，点击按钮不会刷新页面，数据会稳定显示；刷新页面时因为是GET请求，也不会触发重复提交警告。

方案二：更优雅的异步方案（AJAX请求） #

如果想追求更流畅的用户体验，且不想把数据提前暴露在页面源码里，推荐用AJAX异步获取数据：

1. 调整视图函数，支持JSON返回

更新views.py，区分GET（返回页面）和POST（返回JSON数据）：

from django.http import JsonResponse

def create_table(request):
    if request.method == 'POST':
        row_data = "this is row data"
        return JsonResponse({'row_data': row_data})
    # GET请求直接返回页面，不需要提前传row_data
    return render(request, 'javascript/create_table.html')

2. 简化模板代码

更新create_table.html，去掉提前渲染的row_data变量：

{% load static %}
<form action="" method="post">
    {% csrf_token %}
    <button id="create_table">Get data</button>
</form>
<div id="place_for_table"></div>
<script src="{% static 'javascript/scripts/create_table.js' %}"></script>

3. 用AJAX发送请求

更新create_table.js，通过异步请求获取数据：

document.getElementById("create_table").onclick = function(e) {
    e.preventDefault();
    // 获取Django要求的CSRF令牌，用于验证POST请求
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    
    fetch(window.location.href, {
        method: 'POST',
        headers: {
            'X-CSRFToken': csrfToken,
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById("place_for_table").innerHTML = data.row_data;
    })
    .catch(error => console.error('请求出错:', error));
}

这种方式的优势：

• 页面完全无刷新，交互更流畅
• 数据通过异步请求获取，不会暴露在页面源码中
• 刷新页面时始终是GET请求，彻底避免重复提交警告

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