Django 中的 Ajax 正在创建重复元素

Posted 2023-05-08

【中文标题】Django 中的 Ajax 正在创建重复元素

【英文标题】：Ajax in Django is creating duplicate elements

【发布时间】：2021-10-26 09:21:54

【问题描述】：

我有一个表单，它在提交时会使用 Plotly 创建一个图表。我正在尝试使用Ajax 在不刷新页面的情况下提交表单。当表单提交成功时，表单 div 会在屏幕上复制。我不知道如何纠正这个问题。我正在使用 Django Web 框架。这是我的代码。

模板

<form action="% url 'home' %" method='post' id='year-form'>
    % csrf_token %

    <select class="form-select form-select-lg mb-3 dropdown-btn" aria-label="Default select example"
        name="year">
        <option selected>Select Year</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
    </select>

    <div class="d-grid gap-2">
        <button class="btn btn-primary btn-lg" type="submit">Button</button>
    </div>
</form>
<div id="message"></div>

<div class="graph center" id='graph'>
    % if graph %
     graph.0|safe 
    % else %
    <p>No graph was provided.</p>
    % endif %
</div>

ajax jQuery

<script type="text/javascript">
    var frm = $('#year-form');
    frm.submit(function () 
        $.ajax(
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: $(this).serialize(),
            success: function (data) 
                $("#graph").html(data);
            ,
            error: function (data) 
                $("#message").html("Something went wrong!");
            
        );
        return false;
    );
</script>

这是提交表单之前页面的样子

这是提交表单后的样子

我认为我没有在 Ajax 调用的 success 部分提供正确的数据。

【参考方案1】：

您应该使用不同的端点/视图来返回图形模板。目前，您正在获取当前页面并再次加载它，但这次使用的是图表。

您的主页模板应该是：

<form action="% url 'home' %" method='post' id='year-form'>
    % csrf_token %

    <select class="form-select form-select-lg mb-3 dropdown-btn" aria-label="Default select example"
        name="year">
        <option selected>Select Year</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
    </select>

    <div class="d-grid gap-2">
        <button class="btn btn-primary btn-lg" type="submit">Button</button>
    </div>
</form>
<div id="message"></div>

<div class="graph center" id='graph'>
    <p>No graph was provided.</p>
</div>

然后，您在另一个视图中使用了第二个模板，您可以通过 ajax 获得这样的图表：

% if graph %
     graph.0|safe 
% else %
    <p>No graph was provided.</p>
% endif %

【讨论】：

感谢您的回复。但是有不同的观点会把我带到不同的页面，对吗？如何在同一页面中呈现图表？

您使用的是ajax，所以您应该没有这个问题，如果这样做，请尝试添加frm.submit(function (e) => e.preventDefault() ... 以停止表单提交和发布视图

你能解释一下吗？您的解决方案以前有效，但我现在再次面临这个问题。我正在尝试添加更多图表，但它停止工作