axios 是一个用于浏览器与服务端发送请求的框架,它本身具有以下特征携带数据发送请求与接收服务器的请求功能.

基本使用方式(举例):

axios.post(‘路径‘, 参数).then(function (response) {    alert(response.data) })

路径: servlet访问路径

参数: 浏览器携带数据

response.data : 浏览器返回数据

 

下面介绍与vue框架一起使用来完成一个登陆响应的Demo。

首先要引入vue.min.js和axios.min.js


<script src="./js/vue.min.js"></script>
<script src="./js/axios.min.js"></script>

先写好登陆的基本框架,此时暂不加入axios和后端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test login</title>
</head>
<body>
<!--引入包-->
<script src="./js/vue.min.js"></script>
<script src="./js/axios.min.js"></script>
<!--定义操作区,为一个表单-->
<div id="app">
<form action="handleLogin" method="post">
 please enter name:<input type="text" v-model="user.username"><br/>
  please enter pass:<input type="text" v-model="user.userpassword"><br/>
  <input type="button" value="login" v-on:click="login()"> 
  <input type="reset" value="reset"><br/><hr>
<!--视图区定义-->
    {{message}}
    </form>
</div>
<script>
<!--定义vue对象-->
    new Vue({
<!--定义vue接管操作区-->
        el: "#app", 
<!--定义数据模型-->
        data : {
        	user:{username:"",userpassword:""},
        	 message: "", 
        },
<!--定义方法-->
        methods:{
        	login:function()
        	{
        		this.message=this.user.username+" "+this.user.userpassword;   		
        	}
        }
    })
</script>
</body>
</html>

此时访问该项目结果如图所示:

现在,加入axios,将表单数据发送至后端,并响应!

在methods里面加入如下代码

    _that=this;
        	  		
	axios.post("./handleLogin",this.user).then(function(response){
        			alert(response.data);
        		});

解释:

_that=this;

因为在axios里面无法使用this对象,所以我们定义一个that来保存this,在axios里面使用that来完成相关vue相关操作

axios.post("./handleLogin",this.user)

post中的两个参数,第一个是请求路径,第二个是向服务端发送的数据,post也可以改为get,指示请求方式不同而已。

then(function(response){
                    alert(response.data);
                });

固定写法,接在post或者get后,利用response.data来接受服务器返回的数据,此处为了效果,将数据alert一下!

 

前端整体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test login</title>
</head>
<body>
<!--引入包-->
<script src="./js/vue.min.js"></script>
<script src="./js/axios.min.js"></script>
<!--定义操作区,为一个表单-->
<div id="app">
<form action="handleLogin" method="post">
 please enter name:<input type="text" v-model="user.username"><br/>
  please enter pass:<input type="text" v-model="user.userpassword"><br/>
  <input type="button" value="login" v-on:click="login()"> 
  <input type="reset" value="reset"><br/><hr>
<!--视图区定义-->
    {{message}}
    </form>
</div>
<script>
<!--定义vue对象-->
    new Vue({
<!--定义vue接管操作区-->
        el: "#app", 
<!--定义数据模型-->
        data : {
        	user:{username:"",userpassword:""},
        	 message: "", 
        },
<!--定义方法-->
        methods:{
        	login:function()
        	{
        		_that=this;
        		this.message=this.user.username+" "+this.user.userpassword;   		
        		axios.post("./handleLogin",this.user).then(function(response){
        			alert(response.data);
        		});
        	}
        }
    })
</script>
</body>
</html>

后端代码,用一个简单的servlet来完成相应,handleLogin.java

package com.boxuegu.charles;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/handleLogin")
public class handleLogin extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("UTF-8");
		String data=request.getReader().readLine();	
        System.out.print("前端正在访问:"+data);
		response.getWriter().write("接收到前端数据:"+data);
	
	}

}

解释:

利用response.getWriter().write("接收到前端数据:"+data);来返回数据给前端,

   System.out.print("前端正在访问:"+data);向控制台打印信息。

完成基本代码编写,现在访问该demo项目,进行测试。先看浏览器端。

可以看到,浏览器已经接收到了后端传回的数据,此时后端控制台如下:

可以发现,后端已经有了响应,并接收到前端的数据,而且是在doPost方法中响应,如果将前端axios改成get,那么就会在doGet方法中响应。

over!!!

Logo

前往低代码交流专区

更多推荐