表單提交完成后的 JavaScript 調用函數

Question

我有一個使用 jquery 插件創建的隱藏表單，我需要在提交后運行一個函數，但它似乎沒有被調用。 我需要在表格發布后獲取新的 csrf 詳細信息。

提交表單后，我想獲取新生成的 csrf 詳細信息

$(this).on('click', function() {
    $('#' + settings.title.replace(/\s+/g, '-').toLowerCase() + '-export-csv').submit();
    get_csrf_details();
});

帶有將在插件中使用的導出 csv 類和數據的 Html 鏈接。 使用智能模板。

<a href="#" class="export-csv" data-title='Landlords' data-data='{base64_encode($landlords_json)}'>
    Export (CSV)
</a>

導出CSV插件

(function($) {

    $.fn.exportCSV = function ( options ) {

        return $(this).each(function() {
            var settings = $.extend({
                title: null,
                data: null,
                link: '/',
            }, options);

            settings.title = $(this).data('title');
            settings.data = $(this).data('data');

            var hidden_form = "<form id='" + settings.title.replace(/\s+/g, '-').toLowerCase() + "-export-csv' action='" + settings.link + "' method='POST' style='display: none;'>" +
                    "<input type='hidden' class='csrf_field' name='" + csrfName + "' value='" + csrfHash + "'>" +
                    "<input type='hidden' name='title' value='" + settings.title + "'>" +
                    "<input type='hidden' name='data' value='" + settings.data + "'>" +
                "</form>";
            $(this).append(hidden_form);

            $(this).on('click', function() {
                $('#' + settings.title.replace(/\s+/g, '-').toLowerCase() + '-export-csv').submit();
                get_csrf_details();
            });
        });
    }
}(jQuery));

$(".export-csv").exportCSV({
    link: '/dashboard/export-csv'
});

// 從服務器獲取 csrf 詳細信息

var get_csrf_details = function get_csrf_details() {
    $.get('/ajax/get-csrf-details', function(response) {
        var csrfName = response.data.csrf.name;
        var csrfHash = response.data.csrf.hash;

        // const csrf_input1 = document.querySelector('.csrf_field');
        const csrf_inputs = document.getElementsByClassName('csrf_field');

        for (i = 0; i < csrf_inputs.length; i++) {
            csrf_inputs[i].name = csrfName;
            csrf_inputs[i].value = csrfHash;
        }
    });
};

Answer 1

無法知道<form>元素的提交何時成功完成。

但是，考慮到您正在做的事情，只使用 AJAX 會更有意義。 這意味着您可以控制收到響應時執行的確切邏輯，並且不必注入隱藏表單和偽造提交，這遠非理想。 嘗試這個：

$.fn.exportCSV = function(options) {
  return $(this).each(function() {
    var settings = $.extend({
      title: null,
      data: null,
      link: '/',
    }, options);

    settings.title = $(this).data('title');
    settings.data = $(this).data('data');

    $(this).on('click', function() {
      var data = {
        title: settings.title,
        data: settings.data
      };
      data[csrfName] = csrfHash;

      $.ajax({
        url: settings.link,
        type: 'POST',
        data: data,
        success: function(response) {
          // the submission has been made, perform required logic here. 
          get_csrf_details();
        },
        error: function() {
          // something went wrong, debug it!
        }
      });
    });
  });
}

有幾點需要注意。 首先，在第一個請求的響應中返回新的 CSRF 可能更有意義。 這將節省您的網絡流量。

其次，您總是設置settings.title和settings.data以匹配定義此函數的元素上的data屬性，因此使用settings對象毫無意義，因為它總是會被覆蓋，即使沒有提供data屬性。 您可以改為修改邏輯以僅使用存在的data 。