我有一个 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'));
});
最佳答案
您可以使用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'));
});
关于javascript - 使用 JavaScript 提交 Laravel 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64099774/