使用 JavaScript 提交 Laravel 表单

Question

我有一个 HTML 表单，我目前使用表单操作属性和一个 php 脚本提交。 发布请求成功，但它重新加载了页面，我想避免这种情况。 该项目使用 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 发送发布请求并使用preventDefault() 。 我尝试使用 fetch，但由于我对 Laravel 不熟悉，我不明白应该发送哪个参数。 例如，身体是什么？

有很多关于该主题的帖子，但大多数已经过时并导致使用 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对象获取表单字段和值，然后在body字段中使用fetch发送它。

FormData将<form></form>元素作为第一个参数并解析其字段和值

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'));
});

Answer 2

当使用 JavaScript 将表单提交给路由操作时，例如 <form action={{route('something')}}> 数据（表单输入）作为 {$key => $value} 对象传递。 因此，在您的控制器中，您可以通过 input 的 name 属性获取数据单个输入字段。