嵌套 Ajax 调用的问题

Question

我有一系列嵌套的 Ajax 调用来创建数据并将数据更新到数据库中，并在数据成功提交后调用更新列表。

代码是这样工作的：

(1) 页面呈现时显示交易列表，每一行都可以由用户编辑。

(2) 单击特定行时，我运行一个 Ajax 调用以检索填充有待更新数据的表单

(3) 然后也通过 Ajax 提交表单。

(4) 如果成功提交，则执行另一个 Ajax 调用以更新 table。

第一个问题：当通过 Ajax 加载 table 时，“编辑”按钮不再起作用。第二个问题：显示更新和创建的表单是相同的，除了更新表单时是预填的。我想避免重复 Ajax 调用，但我不得不这样做，否则我无法在从第一个 Ajax 调用（pt 1）加载表单后提交表单。有没有办法让代码更干净？

这是 javascript 代码，服务器端一切正常：

$(".edit-transaction").click(function () {
  // obtain the object id to load the correct form
  const object_id = $(this).data('object-id');

  // request the form via AJAX Get request
  $.ajax({
    type: 'GET',
    url: "/transaction/",
    data: {
      'slug': object_id
    },
    success: function(response) {
      // Get the form for the requested object
      $("#display-form").html(response.html); // this code retrive the form
      $("#transaction-form").submit(function (e) { 
        // preventing from page reload and default actions
        e.preventDefault();

        let serializedData = $(this).serialize();

        // Update the form via AJAX
        $.ajax({
          type: 'POST',
          url: "/transaction/",
          data: serializedData,
          success: function (response) {
            console.log('updated successfully')

            // load the table with the new content updated
            $.ajax({
              type: 'GET',
              url: "/get-transactions-list/",
              success: function (data) {
                $("#display-transaction-list").html(data.html);
              },
            });
          },
          error: function (response) {
            let error = response ["responseJSON"]["error"];
            $.each(error, function (code, message) {
              alert('message');
            });
          }
        })
      })
    },
    error: function (response) {
      let error = response ["responseJSON"]["error"];
      $.each(error, function (code, message) {
        alert('message');
      });
    }
  })

});
$("#transaction-form").submit(function (e) {
  // preventing from page reload and default actions
  e.preventDefault();
  let serializedData = $(this).serialize();

  // Create a new transaction via AJAX
  $.ajax({
    type: 'POST',
    url: "/transaction/",
    data: serializedData,
    success: function (response) {
      console.log('created successfully')
      // load the table with the new content updated
      $.ajax({
        type: 'GET',
        url: "/get-transactions-list/",
        success: function (data) {
          $("#display-transaction-list").html(data.html);
        },
      });
    },
    error: function (response) {
      let error = response ["responseJSON"]["error"];
      $.each(error, function (code, message) {
        alert('message');
      });
    }
  })
})

感谢您的帮助

Answer 1

由于一些元素是异步添加的，这意味着在运行时添加的事件侦听器不会影响这些元素。您应该改为通过“事件委托”来收听关于它们的事件。

您还可以创建自定义事件来加载 table 内容。因此，要更新 table，您只需 .trigger() 您的自定义事件。当您想实现其他需要 table 更新、删除等功能时，这很有用。

// custom event for loading the table content
$(document).on('load.table', '#display-transaction-list', function () {
    const $table = $(this);
    $.ajax({
        type: 'GET',
        url: "/get-transactions-list/",
        success: (data) => $table.html(data.html)
    });
});
// edit transaction event
$(document).on('click', '.edit-transaction', function () {
    // obtain the object id to load the correct form
    const object_id = $(this).data('object-id');

    // request the form via AJAX Get request
    $.ajax({
            type: 'GET',
            url: "/transaction/",
            data: {
                'slug': object_id
            },
            success: function(response) {
                // Get the form for the requested object
                $("#display-form").html(response.html); // this code retrive the form
            },
            error: function (response) {
                let error = response ["responseJSON"]["error"];
                $.each(error, function (code, message) {
                alert('message');
            });
        }
    })
});
// save transaction event
$(document).on('submit', '#transaction-form', function (e) { 
    // preventing from page reload and default actions
    e.preventDefault();

    let serializedData = $(this).serialize();

    // Update the form via AJAX
    $.ajax({
        type: 'POST',
        url: "/transaction/",
        data: serializedData,
        success: function (response) {
            // you can add some data to the response 
            // to differentiate between created and updated. Eg response.actionType
            console.log('created or updated successfully')

            // load the table with the new content updated
            $("#display-transaction-list").trigger('load.table');
        },
        error: function (response) {
            let error = response ["responseJSON"]["error"];
            $.each(error, function (code, message) {
                alert('message');
            });
        }
    })
})

嵌套 Ajax 调用的问题

Issue with nested Ajax calls

javascript

ajax

jquery