使用 JavaScript 提交 Laravel 表单答案

【问题标题】：Submit Laravel form using JavaScript使用 JavaScript 提交 Laravel 表单
【发布时间】：2021-01-13 21:27:35
【问题描述】：

我目前使用表单操作属性和 php 脚本提交了一个 HTML 表单。发布请求成功，但它重新加载页面，我想避免这种情况。该项目使用 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'));
});

【问题讨论】：

标签： javascript php laravel forms

【解决方案1】：

当使用 JavaScript 将表单提交到路由操作时，例如

【讨论】：

【解决方案2】：

您可以使用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'));
});

【讨论】：