循环表单并使用 jQuery 使用 AJAX 提交

Posted 2023-05-08

【中文标题】循环表单并使用 jQuery 使用 AJAX 提交

【英文标题】：Looping through forms and submitting with AJAX with jQuery

【发布时间】：2021-10-26 03:37:19

【问题描述】：

我在页面上的表格中有一系列表单，我希望能够使用位于任何表单之外的单个按钮提交。

所以我的 html 看起来像这样：

<button id="save_all">Save all</button>

<form class="form">… <button>Save</button></form>
<form class="form">… <button>Save</button></form>
<form class="form">… <button>Save</button></form>

目前，我有这个，用于提交个人表单：

function submitForms(form) 
    form.submit(function(e) 
        e.preventDefault();
        let form = $(this),
            url = form.attr('action');
        $.ajax(
            type: 'POST',
            url: url,
            data: form.serialize(),
            success: function(data) 
        );
    );


$('.form button').click(function()
    submitForms($(this).parents('form'));
);

但这不起作用：

$('#save_all').click(function()
    $('.form').each(function()
        submitForms($(this));
    );
);

谁能告诉我为什么？

【参考方案1】：

问题是您的submitForms 函数没有提交表单。它只添加了一个 submit 事件监听器。您提交表单的唯一原因是您点击了提交按钮。

试试这样的

// This is your AJAX submitter, it returns a deferred object
const ajaxSubmit = (form) => $.ajax(
  url: form.action,
  method: form.method,
  data: $(form).serialize()
)

// Add individual submit handlers
const forms = $(".form").on("submit", e => 
  e.preventDefault()
  ajaxSubmit(e.target).done(data => 
    // handle response data here if you want
  )
)

// Submit all forms on click
$("#save_all").on("click", () => 
  forms.each((_, form) => 
    ajaxSubmit(form)
  )
)

---

这是强制性的You might not need jQuery 版本...

const ajaxSubmit = form => 
  const data = new FormData(form)

  const init = 
    method: form.method
  
  
  let url = form.action
  if (form.method.toUpperCase() === "POST") 
    init.body = form.enctype === "multipart/form-data" ? data
      : new URLSearchParams(data)
   else 
    url = url.replace(/\?.+$/, '') + `?$new URLSearchParams(data)`
  

  return fetch(url, init)


const forms = document.querySelectorAll("form.form")
forms.forEach(form => 
  form.addEventListener("submit", e => 
    e.preventDefault()
    ajaxSubmit(e.target)
  )
)

document.querySelector("#save_all").addEventListener("click", async () => 
  await Promise.all(Array.from(forms, ajaxSubmit))
)