使用 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() 方法，可以阻止表单的默认提交行为，从而解决这个问题。同时，确保代码中没有其他错误，例如拼写错误或语法错误，以确保代码能够正常执行。

如何在 macOS M1 上为 Apache 正确启用 PHP 模块

如何在 PHP for 循环中正确累加变量值（如 $prog_total）

如何在 PHP 中正确判断多个输入字段是否为空并据此生成数据库插入值

PHP 中正确验证 XML 输入为整数的完整指南

如何在 macOS M1 上为 Apache 启用 PHP（解决模块签名错误）

相关标签:

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

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

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

作者最新文章

Intel旗舰酷睿Ultra X9 388H实测：大小核IPC性能全面超越Zen 5/5c

2026-01-29 16:29

如何在并行加载 JavaScript 脚本的同时保证执行顺序

2026-01-29 16:29

JavaScript 中实现数组排序后单次通知的优雅方案

2026-01-29 16:49

脉脉怎么取消自动续费-脉脉关闭自动续费方法

2026-01-29 16:49

动态生成多页面并实现URL路由跳转的JavaScript教程

2026-01-29 16:53

Flask 中如何通过 URL 参数传递多个变量并获取输入框数据

2026-01-29 17:02

如何让 SVG 在 Flex 布局中严格适配父容器高度且保持宽高约束

2026-01-29 17:09

小鹏汽车app如何修改手机号

2026-01-29 17:18

如何使用 Flexbox 实现水平导航列表项等宽自适应填充

2026-01-29 17:34

重返历史杀鬼子！国产抗日FPS《抵抗者》新预告

2026-01-29 17:34

热门AI工具

DeepSeek

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

AI 编程开发 AI 聊天问答

豆包大模型

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

AI 编程开发 AI大模型

通义千问

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

AI 编程开发 Agent智能体

腾讯元宝

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

文档处理 AI 聊天问答

文心一言

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

AI 编程开发 AI 文本写作

讯飞写作

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

AI 文本写作中文写作

即梦AI

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

图片拼接

ChatGPT

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

AI 编程开发 AI 文本写作

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

AI 编程开发 Agent智能体

相关专题

json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章，帮助大家解决问题。

420

2023.08.07

json是什么

JSON是一种轻量级的数据交换格式，具有简洁、易读、跨平台和语言的特点，JSON数据是通过键值对的方式进行组织，其中键是字符串，值可以是字符串、数值、布尔值、数组、对象或者null，在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容，供大家免费下载体验。

536

2023.08.23