首页 > 其他分享 >Axios请求使用params参数导致后端获取数据嵌套

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

时间:2024-08-16 18:53:17浏览次数:9  
标签:Axios jsonObject req 获取数据 params JSONObject new data

问题重述:

首先看前端的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);
        }
    }
}

标签:Axios,jsonObject,req,获取数据,params,JSONObject,new,data
From: https://blog.csdn.net/github_49984491/article/details/141267111

相关文章

  • 5.vue中axios封装工程化
    vue工程化中axios封装视频演示地址:https://www.bilibili.com/video/BV121egeQEHg/?vd_source=0f4eae2845bd3b24b877e4586ffda69a通常我们封装需要封装request.js基础的发送请求工具类,再根据业务封装service类,service类是具体业务的接口封装,在页面上直接调用的是servive类......
  • linq快速动态获取数据库表字段名称、类型、数据
     varbj="Bj";             varpbj=typeof(Xs_xx).GetProperty(bj);//获得班级属性      /*      varcxbj=fromaainsjklj.Xs_xx            lety=(string)pbj.GetValue(aa,null)//linq......
  • 鸿蒙HarmonyOS NEXT:使用axios方法请求实时天气数据
    通过axios方法请求高德天气查询api,实现获取实时天气数据,接下来是实现步骤:模块导入与数据准备:通过以下语句导入了必要的模块和数据:importaxios,{AxiosResponse,AxiosError}from'@ohos/axios'//导入axiosimport{cities}from'./tools/citys';//调用事先存好的城......
  • axios访问后端,及后端返回前端报错跨域问题
    packagecom.example.demo.test.config;importorg.springframework.util.StringUtils;importjavax.servlet.*;importjavax.servlet.annotation.WebFilter;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjav......
  • 使用 Axios 下载文件并更新进度条
    使用Axios下载文件并更新进度条使用axios的onDownloadProgress回调函数实现下载文件,并更新下载进度条。示例代码import{ElMessage}from"element-plus";importaxiosfrom"axios";importtype{AxiosResponse,AxiosProgressEvent}from"axios";import{baseUrl......
  • axios报错Module not found: Error: Package path ./lib/helpers/buildURL is not exp
    node12使用axios报错:Modulenotfound:Error:Packagepath./lib/helpers/buildURLisnotexportedfrompackageimportbuildURLfrom"axios/lib/helpers/buildURL";import{merge}from"axios/lib/utils";一、原因:对于importaxiosfrom‘./lib/......
  • Vue3+vite+axios+.net api 配置
    exportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{"@":fileURLToPath(newURL("./src",import.meta.url)),},},server:{host:"0.0.0.0",open:true,//启动项目自动弹出浏览器port:&qu......
  • AJAX - 利用XML和Promise封装简易版axios,了解axios底层原理
     AJAX原理-XMLHttpRequest定义:XMLHttpRequest(XHR)对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。关系:axios内部采用......
  • Element学习(axios异步加载数据、案例操作)(5)
    1、这次学习的是上次还未完成好的恶element案例,对列表数据的异步加载,并渲染展示。——>axios来发送异步请求(1)(2)在vue当中安装axios(注意在当前的项目目录,并且安装完之后再将项目重启一下)(3)这里我用到数据的url地址为:https://mock.apifox.cn/m1/3128855-0-default/emp/list......
  • Nuxt3 axios封装 使用axios接口请求
    一、先安装axiosnpminstalladdaxios封装请求request.ts文件importaxiosfrom'axios'import{ElMessage,Message}from"element-plus"import{getToken}from'./token.js'constservice=axios.create({baseURL:'/api',//......