Axios

发表于 更新于 分类于 阅读次数： Valine：

执行步骤

引入包

axios.min.js · moonshuo/fruit stand - Gitee.com

配置信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01.演示Axios发送普通的参数值给服务器端</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript" src="script/axios.min.js"></script>
    <script language="JavaScript">
        window.onload=function(){
            var vue = new Vue({
                "el":"#div0",
                //数据区
                data:{
                    uname:"lina",
                    pwd:"ok"
                },
                //方法区
                methods:{
                    axios01:function(){
                        axios({
                            //需要定义方法，url
                            method:"POST",
                            url:"axios01.do",
                            在这里定义参数
                            params:{
                                uname:vue.uname,
                                pwd:vue.pwd
                            }
                        })
                        //如果成功了，执行这个，
                            .then(function (value) {
                                console.log(value);
                            })
                            .catch(function (reason) {
                            //失败则执行这个
                                console.log(reason);
                            });
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="div0">
        双向绑定，与vue中的uname和pwd相互绑定
        uname:<input type="text" v-model="uname"/><br/>
        pwd:<input type="text" v-model="pwd"/><br/>
        //点击之后调用axios01函数对象
        <input type="button" @click="axios01" value="发送一个带普通请求参数值的异步请求"/>
    </div>
</body>
</html>

后台响应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@WebServlet("/axios01.do")
public class Axios01Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");

        String uname = request.getParameter("uname");
        String pwd = request.getParameter("pwd");

        System.out.println("uname = " + uname);
        System.out.println("pwd = " + pwd);

        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.write(uname+"_"+pwd);

        throw new NullPointerException("这里故意抛出一个空指针异常....");
    }
}

客户端发送JSON格式

JSON表示一个数据格式，比如json表示两个学员的信息

[{sid:”s001”,age:18},{sid:”s002” ,age:18}],JSON表达的数据更加简介，更加可以节约网络带宽，而其与原来的差别只是将method中的date转换成了JSON格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
methods:{
    axios01:function(){
        axios({
            method:"POST",
            url:"axios01.do",
            data:{
                uname:vue.uname,
                pwd:vue.pwd
            }
        })
            .then(function (value) {
                console.log(value);
            })
            .catch(function (reason) {
                console.log(reason);
            });
    }
}

获取参数的方法

而json格式我们使用request.getParameter进行接受，同时需要导入JSON的jar包，进行格式转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@WebServlet("/axios02.do")
public class Axios02Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        StringBuffer stringBuffer = new StringBuffer("");
        //获得对应的读取流
        BufferedReader bufferedReader = request.getReader();
        String str = null ;
        while((str=bufferedReader.readLine())!=null){
            //将读到的数据进行追加
            stringBuffer.append(str);
        }
        str = stringBuffer.toString() ;
        //获得的值是键值对

        //已知 String
        //需要转化成 Java 对象

        Gson gson = new Gson();
        //Gson有两个API
        //1.fromJson(string,T) 将字符串转化成java object
        //2.toJson(java Object) 将java object转化成json字符串，这样才能响应给客户端

        User user = gson.fromJson(str, User.class);

        System.out.println(user);
    }
}

后台发送JSON数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@WebServlet("/axios03.do")
public class Axios03Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        StringBuffer stringBuffer = new StringBuffer("");
        BufferedReader bufferedReader = request.getReader();
        String str = null ;
        while((str=bufferedReader.readLine())!=null){
            stringBuffer.append(str);
        }
        str = stringBuffer.toString() ;

        //已知 String
        //需要转化成 Java Object

        Gson gson = new Gson();
        //Gson有两个API
        //1.fromJson(string,T) 将字符串转化成java object
        //2.toJson(java Object) 将java object转化成json字符串，这样才能响应给客户端

        User user = gson.fromJson(str, User.class);
        user.setUname("鸠摩智");
        user.setPwd("123456");

        //假设user是从数据库查询出来的，现在需要将其转化成json格式的字符串，然后响应给客户端
        String userJsonStr = gson.toJson(user);
        response.setCharacterEncoding("UTF-8");
        //MIME-TYPE，告诉浏览器发送的格式
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(userJsonStr);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script language="JavaScript">
    window.onload=function(){
        var vue = new Vue({
            "el":"#div0",
            data:{
                uname:"lina",
                pwd:"ok"
            },
            methods:{
                axios03:function(){
                    axios({
                        method:"POST",
                        url:"axios03.do",
                        data:{
                            uname:vue.uname,
                            pwd:vue.pwd
                        }
                    })
                        .then(function (value) {
                            var data = value.data;
                            // data对应的数据：
                            // {uname:"鸠摩智",pwd:"ok"}
                            vue.uname=data.uname;
                            vue.pwd=data.pwd;

                            //此处value中的data返回的是 js object，因此可以直接点出属性
                            //如果我们获取的是一个字符串：  "{uname:\"鸠摩智\",pwd:\"ok\"}"

                            //js语言中 也有字符串和js对象之间互转的API
                            //string JSON.stringify(object)     object->string
                            //object JSON.parse(string)         string->object
                        })
                        .catch(function (reason) {
                            console.log(reason);
                        });
                }
            }
        });
    }
</script>

js与字符串与对象之间的相互转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04.JS中的字符串和Object之间互转的API</title>
    <script language="JavaScript">
        function hello01(){
            /*
            //1. js string - > js object
            var str = "{\"uname\":\"lina\",\"age\":20}";
            var user = JSON.parse(str);
            alert(typeof user);
            alert(user.uname+"_"+user.age);
            */

            //2. js object -> js string
            var user = {"uname":"lina","age":99};
            alert(typeof user);
            var userStr = JSON.stringify(user);
            alert(typeof userStr);
            alert(userStr);
        }
    </script>
</head>
<body>
    <div id="div0">
        <input type="button" value="确定" onclick="hello01()"/>
    </div>
</body>
</html>

（来自于尚硅谷|尚硅谷丨2022版JavaWeb教程(全新技术栈,全程实战)_哔哩哔哩_bilibili）

01.Axios示例