Django中使用Ajax提交表单生成Plotly图表出现元素重复问题

问题原因 #

你遇到的表单重复问题，核心是Django视图处理Ajax请求时返回了完整的页面HTML，你将整页HTML直接插入到#graph容器中，相当于把表单、原有页面结构在图表区域又渲染了一遍，自然会出现重复表单。

解决方法 #

1. 调整Django视图逻辑 #

需要区分普通页面请求和Ajax请求，普通请求返回完整模板，Ajax请求仅返回Plotly生成的图表片段即可：

from django.http import HttpResponse
from django.shortcuts import render
# 引入你用到的Plotly相关库

def home(request):
    graph = []
    if request.method == "POST":
        selected_year = request.POST.get("year")
        # 替换为你自己的业务逻辑：根据年份筛选数据生成Plotly图表
        # 示例：fig = px.line(你的数据集, x='字段名', y='字段名')
        # graph.append(fig.to_html(full_html=False))

        # 判断是否为Ajax请求
        if request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest':
            # 仅返回图表HTML片段，不渲染完整模板
            return HttpResponse(graph[0])
    # GET请求、非Ajax的POST请求返回完整页面
    return render(request, "你使用的模板文件路径.html", {"graph": graph})

2. 检查Plotly导出配置 #

调用Plotly的to_html方法时，加上full_html=False参数，避免生成完整的HTML文档结构，只输出图表对应的DOM片段，防止引入多余的页面元素。

你现有的前端Ajax逻辑不需要修改，调整完后端后即可解决表单重复的问题。

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