使用 AJAX 的多个表单导致页面运行太慢

Question

我正在用 Django/python 构建一个网站，在这个特定页面上，视图返回一组对象。然后模板为每个对象生成一个表单，并通过 AJAX 提交表单。

一切都如我所愿，没有错误，但问题是视图中的对象越多，AJAX 的工作速度就越慢。对于大约 100 个对象，每个对象需要 2 到 3 秒，而对于大约 10 个对象，则需要不到一秒。

原本我尝试注释掉很多提交时发生的事情，但根本没有提高速度！

我不确定如何在不改变代码组织方式的情况下加快它的速度，我想远离它，因为这是我非常喜欢的一个功能！

我一直在搜索，但所有答案都说提交表单需要很长时间，而这对我的代码速度没有影响。

interact.html

{% for adopt in adopts %}
    <form class="interact-form">
        <!-- some fields -->
    </form>
{% endfor %}

<script type="text/javascript">
$(document).ready(function(){
    $(".interact-form").submit(function(){
        event.preventDefault();

        $.ajax({
            url: '{% url 'interact' %}',
            type: 'POST',
            data: $(this).serialize(),
            context: this,
            success: function(data) {
                $(this).css("opacity", "0.3");
                $(this).css("cursor", "not-allowed");
            }
        });
    });
});

我对 Django 很陌生，对 AJAX 也很陌生，非常感谢一些帮助。代码都很简单，但如果有帮助的话，这里是（简化的）。

Answer 1

我认为这是因为您将您的 this 变量传递给您的 ajax context 已经有很大的内容。所以这就是我认为减慢你的ajax的原因，而且，接收到的数据类型在速度方面也起着重要作用（尤其是html数据）。如果我是你，我只想使用 dataType: 'json' 接受来自 ajax url 的 JSON - 这是你可以使用 ajax 玩的最快的 DataType。

$(".interact-form").submit(function(){
    event.preventDefault();
    var $this = $(this);
    $.ajax({
        url: '{% url 'interact' %}',
        type: 'POST',
        data: $(this).serialize(),
        dataType: 'json',
        success: function(data) {
            // we are now expecting that `data` is a valid JSON object
            $this.css("opacity", "0.3");
            $this.css("cursor", "not-allowed");
        }
    });
});