Question

我有一个用jquery插件创建的隐藏表单，提交后我需要运行一个函数，但是似乎没有被调用。表单发布后，我需要获取新的csrf详细信息。

提交表单后，我想获取新生成的csrf详细信息

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

带有export-csv类和将在插件中使用的数据的HTML链接。使用smarty模板。

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

ExportCSV插件

(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属性，因此使用{ {1}}对象是没有意义的，因为即使没有提供settings属性，它也总是会被覆盖。相反，您可以修改逻辑以仅使用data（如果存在）。

表单提交完成后的JavaScript调用函数

1 个答案: