Axios请求使用params参数导致后端获取数据嵌套

别再乱用params了!axios post请求参数传递的3种正确姿势(2023新版) 本文详细解析了axios post请求中params和data参数的正确使用方式,避免常见错误。通过Chrome开发者工具演示三种典型场景:URL查询参数、FormData表单提交和JSON传参,帮助开发者掌握2023年最新实践。特别提醒axios 1.x版本的序列化变化及混合传参技巧,提升API调用效率。 阅读详情

问题重述:

首先看前端的axios请求这里我使用params参数将data数据传给后端

 let data = JSON.stringify(this.posts);
                axios.post("/blog_war_exploded/insertPost", {
                    params: {
                        data: data
                    }
                }).then((res) => {
                    if (res.data == "success") {
                        alert("发布成功")
                    } else alert("发布失败")

                });

后端我接受post请求的参数就需要使用流来读取这个我写的没有问题。但是发现对象可以打印出来,但是通过对象.属性名无法获取数据。

打印结果如下:(获取到的对象data被params包起来了导致无法获取title属性值)


 解决方案有两种:

1:改写axios请求格式,不使用params参数,直接用axios.post("url",data)的方式传递参数

2:改写后端,先从 jsonObject 中获取 params 对象,再从 params 对象中解析出 data 字符串,再转换为 JSONObject,然后从 dataObject 中提取需要的字段。

@WebServlet("/insertPost")
public class insertPost extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");
        JSONObject jsonObject = acceptPost(req);
        String title = jsonObject.getString("title");
      //获取其他参数、、、下面我将获取前端的对象打印了出来
        System.out.println("jsonObject = " + jsonObject);
        System.out.println("jsonObject.getString(\"title\") = " + jsonObject.getString("title"));
        GetMapper getMapper = new GetMapper();
        Integer posts = getMapper.insertPost(new posts(title, author, category, label, date, status, content));
        PrintWriter out = resp.getWriter();
        if (posts==1){
            out.write("success");
        }
    }
    /**
     * 接收并解析前端发送的POST请求的JSON数据
     *
     * @param req HttpServletRequest对象,用于获取请求数据
     * @return 解析后的JSONObject对象,包含前端发送的参数
     */
    public static JSONObject acceptPost(HttpServletRequest req) {
        try {
            // 创建BufferedReader对象,从请求输入流中读取数据
            BufferedReader bufferedReader = new BufferedReader(
                    new InputStreamReader(req.getInputStream(), "utf-8"));

            String data; // 用于临时存储每一行读取的数据
            StringBuilder stringBuilder = new StringBuilder(); // 用于存储整个请求的内容

            // 循环读取请求输入流中的数据,直到读完为止
            while ((data = bufferedReader.readLine()) != null) {
                stringBuilder.append(data);
            }

            // 将读取到的JSON字符串转换为JSONObject对象
            JSONObject jsonObject = JSONObject.parseObject(stringBuilder.toString());

            // 返回转换后的JSONObject对象
            return jsonObject;
        } catch (IOException e) {
            // 捕获IO异常并抛出运行时异常
            throw new RuntimeException(e);
        }
    }
}

vue中axios请求payload的暴力解决方案   去年公司做了一个小程序商城项目,运营了一段时间决定再次开发一个H5商城,用于微信好友之间的分享以及app内的嵌套,于是便开了一个vue项目,接口大多都是复用小程序的。  在做项目的过程中本人遇到一个由axios导致的问题——后台接口拿不到请求的参数。因为接口都是之前写好的,并且小程序运行正常,便没有去让后台查看,决定自己找出解决方案。打开浏览器查看参数发现axios的参数是这样子的。  首先我... 阅读详情

相关推荐

关于使用Axios的一些心得

URL 查询字符串(属于 HTTP 请求头部分)参数会显示在 URL 中有长度限制(约 2KB)会被浏览器缓存、记录在历史记录中适合非敏感数据和小数据量传输。

2302_79230324的博客 1012

Axios post 传参的params 与data 的两种形式(根据java后台接口来选择)

前言 params是添加到url的请求字符串中的,一般用于get请求。 data是添加到请求体(body)中的, 一般用于post请求。 上面,只是一般情况. 其实,post请求也可以使用params方式传值 ,但是get请求没有data方式,本文就来介绍一下post的两种传值方式 Axios中posts的params与data的两种传参 第一种:data方式 this.$axios({ url: '/api/user/login' , method: 'post', ...

bug收集 2万+

React 项目中 Axios 封装与请求生命周期管理实战

HTTP 客户端是现代前端工程的基础能力,其核心价值在于弥合 React 同步渲染模型与网络异步 I/O 之间的‘时间差鸿沟’。理解请求拦截器、响应拦截器、AbortController 取消机制及与组件生命周期对齐的封装策略,是构建稳定、可维护数据层的关键。Axios 凭借标准化的错误处理、自动序列化、token 注入和 CancelToken(或 AbortController)支持,成为 React 生态中最成熟的 HTTP 管理载体。本文聚焦生产级 Axios 实例封装、Service 层抽象、Cu

weixin_34242509的博客 419

vue使用axios中post/get请求params/data总结

5、post一般使用data,也可以使用params,post使用params方法和get相似,改 method: 'post' 即可。1、@RequestParam的最大作用就是:明确地告诉controller,这两个参数是从请求参数中获取,一旦没有获取,则报错。请求的情况下,参数会拼接在接口地址的?后面,后端接收不需要带有注解。4、使用Map接收,需要添加 RequestParam 注解。3、get一般使用params,通常不使用data,1、使用params传参,都是在。早期笔记,放上来备份~

nininna的博客 3876

前端同学看过来:URL参数太长导致414?教你用POST + Body优雅重构请求

本文详细介绍了前端开发中遇到URL参数过长导致414错误的解决方案,通过将GET请求优雅地重构为POST请求,有效避免了Request-URI Too Long的问题。文章提供了前后端改造的实战代码示例,并分析了改造后的性能提升与注意事项,帮助开发者优化复杂参数传递场景。

mfw238的博客 106

React中为什么选择Axios而非fetch进行HTTP请求

HTTP客户端是前端与后端通信的基础能力,其设计直接影响错误处理、鉴权统一、请求取消、上传进度控制等工程实践质量。Axios并非简单语法糖,而是面向REST API场景的厚抽象——通过请求/响应拦截器实现横切关注点集中治理,依托Promise与async/await天然契合React异步数据流,支持动态header注入、自动JSON序列化、标准化错误分类(如502 Bad Gateway可精准区分网关故障与业务异常)。相比原生fetch,Axios降低的是团队协作中的认知负荷与维护熵值,尤其在中大型Reac

weixin_30616969的博客 431

【axios】get/post请求params/data传参总结

最近突然发现post请求可以使用params方式传值,然后想总结一下其中的用法。总体来说,只要使用?params?get与post请求基本是一样使用的,如果参数名与传递名称不一致,需要使用修饰,若使用Map接收参数,必须使用修饰。但是如果想传list类型的数据,需要使用单独的方法处理(参考链接)。若使用data传递参数,必须使用一个实体类接收参数,而且需要添加注解进行修饰。【axios】get/post请求params/data传参总结https。...

administratop的博客 1万+

避坑指南:RK3588视频编码与SRT推流实战中,我遇到的5个典型问题及解决方案

本文深度解析RK3588平台视频编码与SRT推流实战中的五个典型问题,包括MIPI摄像头内存对齐、多线程数据传递、FFmpeg时间戳设置、SRT连接参数调优及系统资源监控。提供具体解决方案和优化技巧,帮助开发者高效实现实时视频网络传输。

weixin_28718793的博客 322

axios发送post请求时将请求参数放在params和data配置项的区别,java后端如何获取?

axios发送post请求时将请求参数放在params和data配置项的区别,这两种方式java后端如何获取及postman测试接口传参的区别,好多后端初次遇到可能也会搞混,文中含有个人理解,如有错误请无情指出。

java后端开发的博客,不仅仅是后端开发 8448

TSC条码打印机C#例程(tsclib.dll调用) 【转】

//----program.cs using System;using System.Collections.Generic;using System.Windows.Forms; using System.Runtime.InteropServices;public class TSCLIB_DLL{[DllImport("TSCLIB.dll", EntryPoint = "abou...

weixin_33843947的博客 2440

Claude Code + 自定义模型体验

AI 编程工具的发展突飞猛进:Cursor 横空出世,推出了“Agent 模式”;新竞争者如 Windsurf 也纷纷加入战局。几乎所有产品都开始转向“代理式(agentic)”开发模式——不再依赖单次 LLM 响应进行补全,而是让大模型在一个循环中调用各种工具,来完成更复杂的任务:分析代码库上下文、读取网页与文档、编译程序、运行测试、修复失败构建或测试、不断迭代等。

西京刀客 5790

如何解决Axios请求参数传递错误导致后端接收不到数据/解析失败问题

Axios参数传递问题解决方案 核心问题 前后端参数传递不匹配是Axios请求中最常见的问题,主要原因是参数格式和位置不一致。GET请求应使用params传递URL参数,非GET请求应使用data传递请求体参数。 关键解决方案 GET请求:使用params传参,参数会自动拼接到URL POST/PUT请求:使用data传参,参数放在请求体中 数据格式匹配:确保Content-Type与参数格式一致(JSON/表单/文件上传) 后端接收方式 GET参数:通过查询参数接收(Express的req.query或S

那些看似不起波澜的日复一日,会在某天让你看到坚持的意义 735

Python与西门子PLC数据交互实战:基于Snap7的跨平台工业通信指南

本文详细介绍了如何使用Python和Snap7库实现与西门子PLC的数据交互。内容涵盖跨平台环境搭建、连接参数配置、数据读写实战及性能优化技巧,为工业自动化、数据采集和智能制造场景提供了一套轻量、灵活且高效的通信解决方案。

vim8coder的博客 280

axios请求参数传递全攻略:data与params的实战区别与避坑指南

本文深入解析Axios中data与params参数传递的核心区别与实战应用,帮助开发者避免常见陷阱。通过对比GET与POST请求的参数位置、编码方式及后端接收差异,提供JSON、URL编码和FormData等多种数据格式的处理方案,并分享拦截器优化、批量请求处理等高级技巧,全面提升HTTP请求效率与稳定性。

weixin_30642561的博客 406

东方财富网 数据访问接口及字段说明

东方财富网 数据访问接口和字段说明

雨中山草 2万+

pentaho-kettle依赖拉取失败?试试这个Maven仓库配置的终极解决方案

本文详细解析了Pentaho Kettle依赖拉取失败的常见原因,并提供了三种Maven仓库配置方案,包括基础pom.xml配置、全局settings.xml设置以及企业级私有镜像仓库搭建。通过实战验证的方法和常见问题排查指南,帮助开发者彻底解决pentaho-kettle依赖问题,提升项目构建效率。

weixin_30275415的博客 202

axios请求的params参数值中有对象的传递处理

1.按照qs npm install qs 2.引入qs import qs from 'qs' // post方法的params方式传递对象 axios({ url: '接口', method: 'post', params: data,//传递的对象{aa:{bb:11,cc:22},dd:33} -> api?aa.bb=11&aa.cc=22&dd=33 paramsSerializer: function(params) { return qs.

小楼秋风 2521

用ADSP-21569+SigmaStudio打造音频处理系统:从硬件连接到实时调参实战

本文详细介绍了如何利用ADSP-21569 DSP芯片和SigmaStudio图形化编程工具构建高性能音频处理系统。从硬件接口配置、信号流设计到实时参数调试,提供工业级开发中的实用技巧,包括低延迟优化、动态参数插值等关键技术,帮助开发者快速实现专业音频处理方案。

9o8p7i6u5y的博客 979

axios传参实战:data与params的5个常见坑点及解决方案(附Node/Java代码)

本文深入解析axios传参中data与params的5个常见坑点,包括参数位置错位、内容类型陷阱、GET请求误用等,提供Node/Java代码解决方案。通过实战案例揭示电商项目因传参错误导致订单流失的教训,帮助开发者避免类似问题,提升API调用可靠性。

weixin_30316097的博客 761

高质量文献综述原来这么写!借助Gemini 3 Pro+四步法,手把手教你写出有逻辑深度的综述

总结与展望先总结现状,说明前人已经做到什么地步了,再指出缺口,前人没解决什么问题、方法有什么局限等等,最后再在这个缺口的基础上,提出你的未来研究方向。当你有个复杂的研究题目,但没办法拆解出关键词,就可以让Gemini 3 Pro来辅助帮你拆解,并帮你写专业的检索式,若是找英文文献,还能帮你将中文关键词翻译成地道的专业术语。做文献笔记,可以建立文献笔记矩阵,可以用Excel建个表格,横向是文献,纵向是关键要素,包括作者/年份、研究问题/假设、理论框架/模型、研究方法/数据来源、核心结论、局限性/Gap。

智能AI让学术科研更容易 989

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

Axios GET请求二次封装:从参数序列化到缓存策略的工程实践

在Web前端开发中,HTTP请求是连接前后端数据交互的核心技术。Axios作为基于Promise的HTTP客户端,因其简洁的API和强大的拦截器机制,成为现代前端项目处理网络请求的主流选择。通过二次封装,开发者可以统一配置、简化调用,并增强原生功能,从而提升代码的可维护性和团队协作效率。特别是在处理GET请求时,参数序列化、错误处理、缓存策略等细节直接影响着应用的稳定性和用户体验。本文聚焦于Axios GET请求的深度封装,详细解析了如何通过自定义参数序列化器处理数组、对象嵌套等复杂场景,并探讨了请求取消、

weixin_30883311的博客 372

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

解决axios中get传参为嵌套对象时返回400错误

解决axios中get传参为嵌套对象时返回400错误 错误原因: 400:传参错误,所以是axios解析多层对象异常 解决办法: 安装qs插件来帮助解析参数 实例: 安装: npm i qs yarn add qs 引入: import qs from ‘qs’ 使用: import axios from 'axios' import qs from 'qs' const par = { name: 'wei', age: 18, friend: { goodfriend: 'xiaom

总柴的博客 2073

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

Axios POST请求传参实战:从基础到高级场景全解析

本文全面解析Axios POST请求的传参方法,从基础的JSON格式到高级的FormData、URL查询参数和URLSearchParams编码传参,涵盖文件上传进度监控、并发请求与参数合并等实战场景,帮助开发者高效处理各种HTTP请求需求。

weixin_34209851的博客 367

nuxt项目对get请求的参数进行处理

nuxt请求参数处理,nuxt项目axios接口封装

weixin_47319129的博客 802

vue之嵌套路由params传参

 1、把子路由容器放在home模板结构,<router-view></router-view> <template id="home"> <div> <h1>首页</h1> <button @click="tap()">跳转到other</b

明月几时有?把酒问青天。不知天上宫阙,今夕是何年。我欲乘风归去,又恐琼楼玉宇,高处不胜寒。起舞弄清影,何似在人间。转朱阁,低绮户,照无眠。不应有恨,何事长向别时圆?人有悲欢离合,月有阴晴圆缺,此事古难全。 但愿人长久,千里共婵娟。 3099
上一篇: Day23--前后端分离项目中如何使用 Vue.js 和 Axios 加载 WebServlet 生成的验证码图片
IT ·南栀
博客等级 码龄6年 415粉丝 45原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT ·南栀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值