代码之家 › 专栏 › 技术社区 › Tyssen

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

forms ajax jquery

Tyssen · 技术社区 · 3 年前

我在一个页面的表格中有一系列表单,我希望能够通过位于任何表单外部的单个按钮提交这些表单。

因此,我的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 回复 | 直到 3 年前

Phil 3 年前

问题是你的 submitForms 函数不提交表单。它只是增加了一个提交

试试这样的

// 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))
})

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

5 月前

user28928120 · 如何在jquery中选择所有类?

5 月前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

5 月前