axios

创建项目，导入js文件

入门案例 服务器端代码

@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("doGet");
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        System.out.println(name +" "+age);
        PrintWriter out = response.getWriter();
        out.write("{\"message\":\"ok\"}");
        out.flush();
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("doPost");
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        System.out.println(name +" "+age);
        PrintWriter out = response.getWriter();
        out.write("{\"message\":\"ok\"}");
        out.flush();
    }
}

Get请求

• 代码

    
        
        发送get请求
    
    
        
            
            
            发送get请求1
            发送get请求2
        
        
        
        
            window.onload=function(){
                new Vue({
                    el:'#app',
                    data:{
                        users:{
                            name:'',
                            age:''
                        }
                    },
                    methods:{
                        sendGetByStr(){  //1.get通过直接发字符串拼接
                            let url = 'userServlet?name='+this.users.name+'&age='+this.users.age;
                            axios.get(url).then(function (response) {
                                    console.log(response.data);
                                }).catch(function (error) {
                                    console.log(error);
                                });
                        },
                        sendGetByObj(){      //2.get通过params选项
                            axios.get('userServlet',{
                                    params:{
                                        name:this.users.name,
                                        age:this.users.age
                                    }
                                }).then(function (response) {
                                    console.log(response.data);
                                }).catch(function (error) {
                                    console.log(error);
                                });
                        }
                    }
                });
            }
        
    

• 结果

Post请求

• 代码

    
        
        发送post请求
    
    
        
            
            
            发送Post请求
        
    
    
    
    
        window.onload=function(){
            new Vue({
                el:'#app',
                data:{
                    users:{
                        name:'',
                        age:''
                    }
                },
                methods:{
                    sendPost(){
                        axios.post('userServlet',this.users,{
                            transformRequest:[ //用来处理转换
                                function(data)  {
                                    var transObj='';
                                    for( i in data){
                                        transObj+=i+'='+data[i]+'&';
                                    }
                                    return transObj;
                                }
                            ]}).then(function (response) {
                                console.log(response);
                            }).catch(function (error) {
                                console.log(error);
                            });
                    }
                }
            });
        }
    

• 结果

综合 服务器端代码

@WebServlet("/detpServlet")
public class DeptServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List depts = new ArrayList();
        depts.add(new Dept(10, "ACCOUNTING", "NEWYORK"));
        depts.add(new Dept(20, "RESEARCH", "DALLAS"));
        depts.add(new Dept(30, "SALES", "CHICAGO"));
        depts.add(new Dept(40, "OPERATIONS", "BOSTON"));
        PrintWriter out = resp.getWriter();
        out.write(JSON.toJSONString(depts));
        out.flush();
    }
}

网页代码

    
        
        Title
    
    
        
            
                {{dept.deptno}}
                {{dept.dname}}
                {{dept.loc}}
            
        

        
        
        
            let vm = new Vue({
                el: "#app",
                data: { //函数对象：用来接收数据(数据承载模型)
                    deptList: null
                },
                mounted() {
                    axios.get("detpServlet")
                        .then(response => {
                            this.deptList = response.data
                        });
                }
            });
        
    

结果