🪴 Edwin Aze's Blog

最近文章

最近笔记

Axios 异步请求

2分钟阅读

前端异步请求指的是在前端中发送请求至服务器或其他资源，并且不阻塞用户界面或其他操作。在传统的同步请求中，当发送请求时，浏览器会等待服务器响应，期间用户无法进行其他操作。 而异步请求通过将请求发送到后台，在等待响应的同时，允许用户继续进行其他操作。这种机制能够提升用户体验，并且允许页面进行实时更新。

常见的前端异步请求方式包括使用XMLHttpRequest对象、Fetch API、以及使用jQuery库中的AJAX方法，以及目前最常用的Axios框架等。

在前端页面Header中添加，导入Axios框架：

<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>

在之前只用Servlet中时是使用： 使用XHR动态更新页面

案例

异步登录显示登陆成功

前端部分：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>测试</title>  
    <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>  
</head>  
<body>  
<p>欢迎来到GayHub全球最大同性交友网站</p>  
<button onclick="login()">立即登录</button>  
<script>  
    function login() {  
        axios.post('/mvc/test', {  
            username: 'test',  
            password: '123456'  
        }, {  
            headers: {  
                'Content-Type': 'application/x-www-form-urlencoded'  
            }  
        }).then(({data}) => {  
            if(data.success) {  
                alert('登录成功')  
            } else {  
                alert('登录失败')  
            }        })    }</script>  
  
</body>  
</html>

服务器端只需要在请求参数位置添加一个对象接收即可（和前面是一样的，因为这里也是提交的表单数据）：

@ResponseBody
@PostMapping(value = "/test", produces = "application/json")
public String hello(String username, String password){
    boolean success = "test".equals(user.getUsername()) && "123456".equals(user.getPassword());
    JSONObject object = new JSONObject();
    object.put("success", success);
    return object.toString();
}

反向链接