利用Axios-vue来向后端发送数据并接受响应

axios 是一个用于浏览器与服务端发送请求的框架，它本身具有以下特征携带数据发送请求与接收服务器的请求功能.基本使用方式（举例）：axios.post(‘路径‘, 参数).then(function (response) {alert(response.data) })路径: servlet访问路径参数: 浏览器携带数据response.data : 浏览器...

Charles Chou

13601人浏览 · 2019-07-26 20:31:23

Charles Chou · 2019-07-26 20:31:23 发布

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！！！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^