javascript - 避免对 jQuery sortable( ) 进行多次 AJAX 调用

Question

我是 jQuery 新手。基本上我有一个表格，我可以对行进行排序。我想在后端保存新订单，我可以这样做。但是，我注意到我发送了多个 Ajax 调用，具体取决于我对表格进行排序的次数。订单未在后端正确保存。这是我的代码。变量 order 是存储新 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 事件处理程序移到外部，并通过函数参数或公共(public)变量传递变量。