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

花韻仙語

发布时间：2025-09-18 18:01:35

437人浏览过

来源于php中文网

原创

使用 fetch api 发送 formdata 时遇到的问题及解决方案

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

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

问题分析与解决

当一个按钮位于

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

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

示例代码：

php商城系统

PHP商城系统是国内功能优秀的网上商城系统，同时也是一个商业的PHP开发框架，有多套免费模版，强大的后台管理功能，专业的网上商城系统解决方案，快速建设网上购物商城、数码商城、手机商城、办公用品商城等网站。 php商城系统v3.0 rc6升级 1、主要修复用户使用中出现的js未加载完报错问题，后台整改、以及后台栏目的全新部署、更利于用户体验。 2、扩展出，更多系统内部的功能，以便用户能够迅速找到需

下载

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 确实位于一个元素内，否则 preventDefault() 方法可能不会产生预期的效果。
检查代码中是否存在其他错误，例如拼写错误，变量未定义等。在提供的原始代码中，console.log(test 2);缺少引号，会导致 JavaScript 报错，影响代码执行。

总结

在使用 Fetch API 发送 FormData 时，如果遇到代码执行中断或无法接收 JSON 响应的问题，首先要检查是否是表单的默认提交行为导致了页面刷新。通过调用 preventDefault() 方法，可以阻止表单的默认提交行为，从而解决这个问题。同时，确保代码中没有其他错误，例如拼写错误或语法错误，以确保代码能够正常执行。

PHP 中 fopen() 返回 true 的真相：运算符优先级导致的赋值陷阱

PHP 中 fopen() 返回 true 的真相：警惕逻辑运算符的赋值陷阱

PHP 中 fopen() 返回布尔值 true 的根本原因与运算符优先级有关

NetBeans如何运行PHP脚本_NetBeans运PHP脚本要点【精要】

PHP怎么注释数组_PHP数组注释形式【实用】

相关标签:

php javascript java js json app 后端 ai php JavaScript json console 对象事件

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：PHP代码注入检测行业标准_PHP代码注入检测行业标准解读下一篇：JavaScript Fetch与FormData：解决表单提交中断事件流的问题

作者最新文章

Python 列表为空？警惕循环中意外重置变量的常见陷阱

2026-01-17 12:29

RTX50系显卡出货大砍！今年一整年恐无新显卡

2026-01-17 12:31

解析 Python 类型注解字符串以提取泛型参数（如 Tuple 中的子类型）

2026-01-17 12:32

Go 中 map 迭代顺序的不确定性与格式化动词无关

2026-01-17 12:34

如何通过按钮点击复制并重命名文件（PHP 实现）

2026-01-17 13:05

《生化危机9：安魂曲》回归浣熊市原因曝光！让系列重回主线

2026-01-17 13:06

如何用Python优雅实现逗号分隔列表（含“and”连接）

2026-01-17 13:09

《勇者斗恶龙7 Reimagined》职业系统/强敌怪物等介绍

2026-01-17 13:15

Go语言解析SOAP响应XML的完整教程：解决命名空间导致的结构体字段为空问题

2026-01-17 13:15

《上古卷轴4：湮灭重制版》在PS5平台卖出110万份

2026-01-17 13:28

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

php文件怎么打开

打开php文件步骤：1、选择文本编辑器；2、在选择的文本编辑器中，创建一个新的文件，并将其保存为.php文件；3、在创建的PHP文件中，编写PHP代码；4、要在本地计算机上运行PHP文件，需要设置一个服务器环境；5、安装服务器环境后，需要将PHP文件放入服务器目录中；6、一旦将PHP文件放入服务器目录中，就可以通过浏览器来运行它。

2687

2023.09.01