JavaWeb-Servlet-Vue-Axios-Json-数据请求与展示(POST-JSON数据处理)

itl-coder.github.io

已于 2022-04-08 22:01:43 修改

阅读量427

点赞数

CC 4.0 BY-SA版权

分类专栏： Java 文章标签： json

于 2022-04-08 21:59:24 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43340420/article/details/124051997

本文介绍了如何使用Vue前端框架配合axios发送POST请求到Servlet，展示了数据接收、映射到ActionDataForm实体，并在页面上展示渲染的过程。通过实例代码和EncodingFilter处理了编码问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

使用axios发起POST请求,通过servlet展示数据

实现页面渲染

数据渲染

具体实现

servlet

package com.example.info.controller;

import com.alibaba.fastjson.JSON;
import com.example.info.entity.ActionDataForm;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "ActionFormController", value = "/ActionFormController")
public class ActionFormController extends HttpServlet {
     
     
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     
     
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     
     
        // 输出请求体类型
        System.out.println(request.getContentType());
        // 通过实体类映射,获取 JSON 数据(后续补充)  ActionDataForm=>映射表单的实体类(element表单没有 name属性)
        ActionDataForm actionDataForm = JSON.parseObject(request.getInputStream(), ActionDataForm.class);
        response.setContentType("text/json;");
        String jsonString = JSON.toJSONString(actionDataForm);
        // BUG: 页面未能显示
        response.getWriter().write(jsonString);
    }
}

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交</title>
    <style

最低0.47元/天解锁文章

200万优质内容无限畅学