在jQuery中使用FormData提交表单 - 没有Ajax且没有隐藏字段

Question

我有一个函数，它在表单提交上做一些自定义工作，通过Ajax发送一些数据，将返回的数据附加到一个新的FormData对象中，现在我需要使用这个FormData以常规方式（不是通过Ajax）提交表单。我知道它可以用隐藏字段来实现，但是如果我不希望返回的数据对于知道一些编码的人是可见的呢？

那么可以在没有隐藏字段和Ajax的情况下在jQuery中提交带有自定义FormData的表单吗？

Answer 1

您可以在提交之前将对象添加到表单中，然后直接将其删除。

$('#yourForm').submit(function() {
    $(this).append(yourCustomObject)
    $(this).submit();
    $(yourCustomObject).remove();
});

Answer 2

目前，因为您无法从FormData对象调用submit事件，所以：

1. 拦截原始提交事件，阻止默认提交行为
2. 将原始表单复制到新的FormData实例（一切都会 被复制）
3. 使用jquery ajax或native XHR来调用服务器 行动 请注意，使用正确的配置，ajax调用效果与ajax / xhr调用相同。

Answer 3

我从answer找到了答案。如果您还没有表单，可以像在另一篇文章中一样创建表单。在我的情况下，我有一个现有的表单，所以我在提交事件中处理它。

  $('form').on('submit',e => {

    formData['caption'] = $('#caption').val()
    formData['action']  = 'create'

    $.each(formData,(key,value) => {

      let field = $('<input></input>')

      field.attr("type", "hidden")
      field.attr("name", key)
      field.attr("value", value)

      $('form').append(field)
    })
  })

仅供参考，我在文档中的另一个事件中突变了formData。

请记住，表单将在创建这些字段后立即提交，而不是获取该数据并在表单上添加隐藏字段，因此数据在提交之前很久就不会成为表单的一部分。