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事件处理程序，并通过函数参数或公共变量传递变量。

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

1 个答案: