javascript - 使用 JavaScript 提交 Laravel 表单

Question

我有一个 HTML 表单，当前使用表单操作属性和 php 脚本提交。 post 请求成功，但它重新加载页面，我想避免这种情况。该项目使用 Laravel/Blade PHP 模板。

<form 
  id="update-form" 
  method="post"
  action="{{ route('update', ['id' => $user['id']]) }}"
>
@csrf
...
</form>

<button type="submit" form="update-form">Submit</button>

为了防止页面重新加载，我想使用 JavaScript 发送 post 请求并使用 preventDefault()。我尝试使用 fetch，但由于我不熟悉 Laravel，我不明白应该发送哪个参数。例如， body 是什么？

有很多关于这个主题的帖子，但大多数都已经过时并导致 jQuery 解决方案，这对我来说不是一个选择。

这是我尝试过的:

document.querySelector('#update-form').addEventListener('submit', (e) => {
  e.preventDefault();
  fetch("{{ route('update', ['id' => $user['id']]) }}", { 
    method: 'post'
  }).then(() => console.log('success'));
});

Answer 1

您可以使用FormData对象获取表单字段和值，然后使用 fetch 发送它在body字段。

FormData takes <form></form> element as first param and parses its fields and values

document.querySelector('#update-form').addEventListener('submit', (e) => {
  e.preventDefault();
  var formData = new FormData(e.target);
  fetch("{{ route('update', ['id' => $user['id']]) }}", { 
    method: 'POST',
    body: formData
  }).then(() => console.log('success'));
});