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

itl-coder.github.io

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

阅读量317

点赞数

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

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

本文链接：https://blog.csdn.net/weixin_43340420/article/details/124051997

版权

Java 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

需求

使用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>
        #app {
            width: 960px;
            margin: 50px auto;
        }

        .el-form-item .el-button {
            display: block;
            width: 15%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="用户名">
            <el-input v-model="formLabelAlign.uname"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="formLabelAlign.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="爱好">
            <el-checkbox-group v-model="formLabelAlign.hobby">
                <el-checkbox label="打代码"></el-checkbox>
                <el-checkbox label="运动"></el-checkbox>
                <el-checkbox label="睡觉"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="性别">
            <el-radio v-model="formLabelAlign.sex" label="male">男</el-radio>
            <el-radio v-model="formLabelAlign.sex" label="female">女</el-radio>
        </el-form-item>
        <el-form-item>
            <el-button type="success" @click="postSubmit()">提交</el-button>
        </el-form-item>
    </el-form>
    <div ref="reRef"></div>
</div>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                labelPosition: 'right',
                formLabelAlign: {
                    // 实体类映射时名称需要与此处相同
                    uname: '',
                    password: '',
                    hobby: [],
                    sex: 'male'
                }
            }
        },
        methods: {
            postSubmit() {
                // 发送 POST 请求
                axios.post("http://localhost:8080/ActionFormController", this.formLabelAlign)
                    .then(resp => {
                        // 请求成功 {"uname":"ada","password":"dad","checkList":["打代码"],"sex":"male"}
                        Vue.prototype.$message({
                            showClose: true,
                            message: '请求发送成功!',
                            type: 'success',
                            offset: 50,
                            duration: 1000
                        })
                        // Object 要显示使用
                        this.$refs.reRef.innerHTML = JSON.stringify(resp.data)
                        console.log((resp.data))
                    })
            }
        }
    })
</script>
</body>
</html>

编码处理过滤器

package com.example.info.fillter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;

@WebFilter("/ActionFormController")
public class EncodingFilter implements Filter {
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        servletRequest.setCharacterEncoding("UTF-8");
        // 特定 filter
        servletResponse.setContentType("text/html;charset=utf-8");
        filterChain.doFilter(servletRequest, servletResponse);
    }
}

实体类映射

package com.example.info.entity;

import java.util.Arrays;
// 注意: 不能重写 toString
public class ActionDataForm {
    private String uname;
    private String[] hobby;
    private String sex;

    public ActionDataForm() {
    }

    public ActionDataForm(String uname, String[] hobby, String sex) {
        this.uname = uname;
        this.hobby = hobby;
        this.sex = sex;
    }

    public String getUname() {
        return uname;
    }

    public void setUname(String uname) {
        this.uname = uname;
    }

    public String[] getHobby() {
        return hobby;
    }

    public void setHobby(String[] hobby) {
        this.hobby = hobby;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

}

maven依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>
    <artifactId>Info</artifactId>
    <version>1.0-SNAPSHOT</version>
    <name>Info</name>
    <packaging>war</packaging>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.target>1.8</maven.compiler.target>
        <maven.compiler.source>1.8</maven.compiler.source>
        <junit.version>5.8.1</junit.version>
    </properties>

    <dependencies>
           <groupId>javax.servlet</groupId>
                <artifactId>javax.servlet-api</artifactId>
                <version>4.0.1</version>
                <scope>provided</scope>
            <dependency>
            <!-- json 处理 -->
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.78</version>
        </dependency>
</project>

itl-coder.github.io

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb-Servlet-Vue-Axios-Json-数据请求与展示(POST-JSON数据处理)

需求使用axios发起POST请求,通过servlet展示数据实现页面渲染数据渲染具体实现servletpackage com.example.info.controller;import com.alibaba.fastjson.JSON;import com.example.info.entity.ActionDataForm;import javax.servlet.ServletException;import javax.servlet.ann
复制链接

扫一扫