本文旨在解决在使用 JavaScript 的 Fetch API 发送 FormData 时，遇到的代码执行中断、无法接收 JSON 响应等问题。通过分析问题原因，提供添加 preventDefault() 阻止默认提交行为，以及修复代码错误的解决方案，帮助开发者顺利完成文件上传和数据传输。
在使用 Fetch API 发送 FormData 时，你可能会遇到一些意想不到的问题，例如，点击提交按钮后，只有 FormData 的 POST 请求被执行，其他代码（包括 console.log）没有执行，并且无法从 PHP 后端接收 JSON 响应。这种情况通常是由于表单的默认提交行为导致的页面刷新所致。
问题分析与解决
当一个按钮位于 zuojiankuohaophpcnform> 元素内时，点击该按钮可能会触发表单的默认提交行为，导致页面刷新。这会中断 JavaScript 代码的执行，使得后续的代码无法运行，并且无法接收到后端返回的 JSON 响应。
要解决这个问题，需要在事件处理函数中调用 preventDefault() 方法，阻止表单的默认提交行为。
示例代码：
save_bg_btn.addEventListener('click', save_background_picture);
async function save_background_picture(e){
e.preventDefault(); // 阻止表单默认提交行为
console.log("test 1");
const formData = new FormData();
const save_files_background_pic = file_bg_pic.files[0];
const url = 'http://localhost/test/background-cover.php';
formData.append("file_bg_pic", save_files_background_pic);
await post_formdata_request(url, formData)
.then(data =>{
console.log(data);
})
.catch(err => console.log(err));
console.log("test 2");
}
function post_formdata_request(url, formData){
return new Promise((resolve, reject) => {
fetch(url, {
method: 'POST',
body: formData
})
.then(res => res.json())
.then(data => resolve(data))
.catch(err => reject(err));
});
}
登录后复制
代码解释：
- e.preventDefault();：这行代码阻止了表单的默认提交行为，防止页面刷新。e 是事件对象，包含了关于事件的信息。
注意事项：
- 确保 save_bg_btn 确实位于一个 <form> 元素内，否则 preventDefault() 方法可能不会产生预期的效果。
- 检查代码中是否存在其他错误，例如拼写错误，变量未定义等。在提供的原始代码中，console.log(test 2);缺少引号，会导致 JavaScript 报错，影响代码执行。
总结
在使用 Fetch API 发送 FormData 时，如果遇到代码执行中断或无法接收 JSON 响应的问题，首先要检查是否是表单的默认提交行为导致了页面刷新。通过调用 preventDefault() 方法，可以阻止表单的默认提交行为，从而解决这个问题。同时，确保代码中没有其他错误，例如拼写错误或语法错误，以确保代码能够正常执行。
以上就是使用 Fetch API 发送 FormData 时遇到的问题及解决方案的详细内容，更多请关注php中文网其它相关文章！