在jQuery sortable（）上避免多个AJAX调用

Question

我是jQuery的新手。 基本上我有一个表，我可以对行进行排序。 我想在后端保存新订单，我能够做到。 但是，我注意到我正在发送多个Ajax调用，具体取决于我对表进行排序的次数。 订单未在后端正确保存。 这是我的代码。 变量顺序是存储新ID的位置。 我通过'/ updateorder'路线在我的Django中发送它/

<script type="text/javascript">
  $(document).ready(function(){
    $("#sortable").sortable({
      update: function (event, ui) {
        var order = $(this).sortable('toArray');
        console.log(order);

        $(document).on("click", "button", function () {
          $.ajax({
            data: {csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value, 'order[]': order},
            type: 'POST',
            url: '/updateorder'
          })
        });
      }
    }).disableSelection();
      $('button').on('click', function () {
        var r = $("#sortable").sortable("toArray");
        var a = $("#sortable").sortable("serialize", {
          attribute: "id"
        );
        console.log(r);
      });
    });   
</script>

单击按钮时，如何避免发送多个Ajax调用？ 此外，在执行逻辑后重定向到不同页面的正确方法是什么？ 谢谢阅读！

PS：我在后端使用python / django

Answer 1

答案在你的代码中。 每次移动项目时都附加事件处理程序。 因此，当您对5个项目进行排序时，会将5个事件处理程序附加到您的提交按钮。 然后，当您单击该按钮时，所有5个事件处理程序立即触发ajax调用。 您应该在外部移动onclick事件处理程序并通过函数参数或公共变量传递变量。