Javascript 避免对jQuery sortable（）进行多个AJAX调用

我不熟悉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>

$（文档）.ready（函数（）{
$（“#可排序”）。可排序({
更新：功能（事件、用户界面）{
var order=$（this.sortable（'toArray'）；
控制台日志（订单）；
$（文档）。在（“单击”、“按钮”上，函数（）{
$.ajax({
数据：{csrfmiddlewaretoken:document.getElementsByName（'csrfmiddlewaretoken'）[0]。值，'order[]'：order}，
键入：“POST”，
url:“/updateorder”
})
});
}
}).disableSelection（）；
$（'button'）。在（'click'，函数（）{
var r=$（“#可排序”）。可排序（“toArray”）；
var a=$（“#可排序”）.sortable（“序列化”{
属性：“id”
);
控制台日志（r）；
});
});   

当我点击按钮时，如何避免发送多个Ajax调用？另外，执行逻辑后重定向到其他页面的正确方法是什么？谢谢阅读

---

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

如果有其他请求，您需要取消以前的请求，请尝试查看此处您好，我尝试了每个链接的代码，我做了一些修改，我仍在发送多个ajax调用：（天哪！非常感谢！