Axios的简单使用：客户端向服务器异步发送普通参数值、客户端向服务器异步发送json格式的数据

最新推荐文章于 2024-01-23 13:09:01 发布

冬竹️

最新推荐文章于 2024-01-23 13:09:01 发布

阅读量570

点赞数

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

本文链接：https://blog.csdn.net/weixin_46245201/article/details/124231079

版权

Java 专栏收录该内容

157 篇文章 2 订阅

订阅专栏

文章目录

1. 客户端向服务器异步发送普通参数值
- 1.1 前端
- 1.2 后端
2. 客户端向服务器异步发送json格式的数据
3. 图示

1. 客户端向服务器异步发送普通参数值

1.1 前端

<!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({
                            method:"POST",
                            url:"axios01.do",
                            params:{
                                uname:vue.uname,
                                pwd:vue.pwd
                            }
                        })
                            .then(function (value) {//响应成功时回调，value.data可以获取服务器响应的内容
                                console.log(value);
                            })
                            .catch(function (reason) {//有异常时执行的回调，reason.response.data可以获取响应的内容
                                console.log(reason);
                            });
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="div0">
        uname:<input type="text" v-model="uname"/><br/>
        pwd:<input type="text" v-model="pwd"/><br/>
        <input type="button" @click="axios01" value="发送一个带普通请求参数值的异步请求"/>
    </div>
</body>
</html>

1.2 后端

package com.atguigu.axios;

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;
import java.io.PrintWriter;

@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("这里故意抛出一个空指针异常....");
    }
}

2. 客户端向服务器异步发送json格式的数据

2.1 json格式

json表达数据更简洁，更能节约网络带宽。

[{sid:"s001",age18},{sid:"s002",age:19}]

2.2 代码演示

2.2.1 前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03.演示Axios发送异步请求给服务器端，服务器响应json格式的数据给客户端</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:{
                    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>
</head>
<body>
    <div id="div0">
        uname:<input type="text" v-model="uname"/><br/>
        pwd:<input type="text" v-model="pwd"/><br/>
        <input type="button" @click="axios03" value="服务器响应json格式的数据给客户端"/>
    </div>
</body>
</html>

2.2.2 后端

package com.atguigu.axios;

import com.atguigu.pojo.User;
import com.google.gson.Gson;

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.BufferedReader;
import java.io.IOException;

@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);
    }
}

3. 图示

在这里插入图片描述

冬竹️

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Axios的简单使用：客户端向服务器异步发送普通参数值、客户端向服务器异步发送json格式的数据

文章目录1. 客户端向服务器异步发送普通参数值1.1 前端1.2 后端2. 客户端向服务器异步发送json格式的数据2.1 json格式2.2 代码演示2.2.1 前端2.2.2 后端3. 图示1. 客户端向服务器异步发送普通参数值1.1 前端<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01.演示Axios发送普通的参数值给服务器端
复制链接

扫一扫

专栏目录