使用 Fetch API 发送 FormData 时遇到的问题及解决方案

本文旨在解决在使用 JavaScript 的 Fetch API 发送 FormData 时，遇到的代码执行中断、无法接收 JSON 响应等问题。通过分析问题原因，提供添加 preventDefault() 阻止默认提交行为，以及修复代码错误的解决方案，帮助开发者顺利完成文件上传和数据传输。

在使用 Fetch API 发送 FormData 时，你可能会遇到一些意想不到的问题，例如，点击提交按钮后，只有 FormData 的 POST 请求被执行，其他代码（包括 console.log）没有执行，并且无法从 PHP 后端接收 JSON 响应。这种情况通常是由于表单的默认提交行为导致的页面刷新所致。

问题分析与解决

当一个按钮位于 zuojiankuohaophpcnform> 元素内时，点击该按钮可能会触发表单的默认提交行为，导致页面刷新。这会中断 JavaScript 代码的执行，使得后续的代码无法运行，并且无法接收到后端返回的 JSON 响应。

要解决这个问题，需要在事件处理函数中调用 preventDefault() 方法，阻止表单的默认提交行为。

示例代码：

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

22

查看详情

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中文网其它相关文章！