java web 使用vue和axios的前后端传输数据个人总结

后端servlet接收请求数据

普通数据

request.getParameter()即可

json数据

1. 获得一个request.getReader()输入流，生成对应字符串
2. Gson.fromJson(String str,Class clazz) 转化为对应对象

后端servlet发送响应数据

普通数据

response.setCharcterEncoding(“UTF-8”);
response.setContentType(“text/html;charset=utf-8”);
response.getWriter().write(……);

json数据

Gson.toJson(要传的对象)，会生成字符串JsonStr
application/json表示发送json格式数据，如果是普通字符串写text/html即可
response.setCharcterEncoding(“UTF-8”);
response.setContentType(“application/json;charset=utf-8”);
response.getWriter().writer(JsonStr);

前端发送普通异步请求

对于params:{}格式的请求，也可以以name=value&name=value的方式发送请求参数，并且无论请求方式是get还是post,请求参数都会被拼接到请求地址后，如前所述，此种方式的请求参数通过request.getParameter()获取。

new Vue({
    "el":"#app",
    "data":{},
    "methods":{
        "commonParam":function () {
            axios({
                "method":"post",
                "url":"/demo/AjaxServlet?method=commonParam",
                "params":{
                    "userName":"tom",
                    "userPwd":"123456"
                }
            }).then(function (response) {
                console.log(response);
            }).catch(function (error) {
                console.log(error);
            });
        }
    }
});

前端发送json格式请求

data:{}以json格式发送请求参数。请求参数会保存到请求报文的请求体中传输给服务器，因为get方式没有请求体，所以请求方式不能用get。此请求不能用request.getParameter()获取。

"methods":{
    "requestBodyJSON":function () {
        axios({
            "method":"post",
            "url":"/demo/AjaxServlet?method=requestBodyJSON",
            "data":{
                "stuId": 55,
                "stuName": "tom",
                "subjectList": [
                    {
                        "subjectName": "java",
                        "subjectScore": 50.55
                    },
                    {
                        "subjectName": "php",
                        "subjectScore": 30.26
                    }
                ],
                "teacherMap": {
                    "one": {
                        "teacherName":"tom",
                        "tearcherAge":23
                    },
                    "two": {
                        "teacherName":"jerry",
                        "tearcherAge":31
                    },
                },
                "school": {
                    "schoolId": 23,
                    "schoolName": "atguigu"
                }
            }
        }).then(function (response) {
            console.log(response);
        }).catch(function (error) {
            console.log(error);
        });
    }
}

前端接受到响应后字符串和对象的互相转换

js String to js Object 使用 Json.parse(str)
js Object to js String 使用 Json.stringify(object)