axios的get方法实现web工程的异步请求

妮听得到

已于 2022-08-07 17:31:02 修改

阅读量397

点赞数

文章标签： servlet web java

于 2022-07-31 17:42:01 首次发布

本文链接：https://blog.csdn.net/m0_58121644/article/details/126088269

版权

Axios是一个基于Promise的HTTP库，用于在Web工程中进行异步请求。通过引入axios.min.js，可以方便地实现GET和POST请求。在GET请求中，参数可以通过URL传递，后端能直接获取。在响应时，可以使用.then()处理返回的数据，更新前端页面。后端需设置响应内容类型为json并返回JSON字符串。示例展示了如何绑定点击事件触发axios请求，实现数据交互。

摘要由CSDN通过智能技术生成

axios实现web工程的异步请求

Axios就是一个基于Promise来管理http请求的简洁、易用且高效的代码封装库。相比于Ajax的回调函数能够更好的管理异步操作。

由于是一个代码封装库，使用之前必须安装，比较便捷的方式是直接在使用axios的HTML文件或者JSP文件中添加：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

使用axiox实现get请求：

axios({
        method:"get",
        url:"http://localhost:8080/hello/test?name=+"value
    })

method：定义请求方法

url：定义请求路径，使用完整路径，在使用get请求的时候在url后面添加上键值对，在servlet中可以可以直接获取到参数值：

String name=request.getParameter("name");

使用axios实现get请求并从服务端接收数据

使用的axios实现的数据提交：封装在一个js的函数中，并绑定在一个按钮中，提交input中的值到后台的servlet中

function find01() {
    axios({
        method:"get",
        url:"http://localhost:8080/hello/test?num1="+choice1
    }).then(function (resp){
        let a = resp.data;
        console.log(a);
    })
}
document.getElementById("submit01").addEventListener('click', find01);

后端处理的时候注意这三行代码：

response.setContentType("text/json;charset=utf-8");
String jsonString = JSON.toJSONString(已经获取到的对象集合);
response.getWriter().write(jsonString);

关于参数的传递，需要使用setContentTyp方法将字符编码格式改为json和utf-8；
将在后端获取到的对象集合转化为json字符的形式；
将已经转化为json数据类型的数据传递给回调函数

resp作为回调函数的参数，由后端传递而来，里面是一个由数据库获取到的对象集合，利用其中的数据可以在js文件中对前端页面进行修改，实现页面的局部刷新。由与后端的servlet数据已经传输到前端，不需要再将获取到的数据存到request域中去，也不需要再经转发到HTML或者JSP页面进行从新加载。

相关链接：使用axios的post请求