axios
1 Ajax
1.1 什么是Ajax?
Ajax 是指一种创建交互式网页应用的开发技术。Ajax = 异步 JavaScript 和 XML。
1.2 Ajax的作用
Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（局部更新）。传统的网页如果需要更新内容，必须重载整个网页页面。
简单记: Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术, 维护用户体验性, 进行网页的局部刷新.
1.3 异步与同步
浏览器访问服务器的方式
- 同步访问: 客户端必须等待服务器端的响应,在等待过程中不能进行其他操作
- 异步访问: 客户端不需要等待服务的响应,在等待期间,浏览器可以进行其他操作
1.4 案例演示
ajax.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<input type="text" />
<input type="button" value="Jquery发送异步请求" onclick="run1()" />
</body>
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
function run1() {
//JQuery Ajax方式 发送异步请求
$.ajax({
// 请求路径
url: "ajax",
// 是否异步
async:true,
// 请求携带的数据
data: {
name: "天青色等烟雨，而我在等你..."
},
// 请求方式
type: "post",
// 预期的 服务器返回的 数据类型
dataType:"text",
// 请求成功后调用的回调函数
success: function (res) {
console.log(res)
alert("响应成功" + res);
},
// 请求失败时被调用的函数
error: function () {
alert("响应失败!");
}
});
}
</script>
</html>
AjaxServlet
@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//1.获取请求数据
String username = req.getParameter("name");
//模拟业务操作,造成的延时效果
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//2.打印username
System.out.println(username);
resp.getWriter().write("hello hello");
}
}
2 axios
VUE中结合网络数据进行应用的开发
- 目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便
- axios作用: 在浏览器中可以帮助我们完成 ajax异步请求的发送.
2.1 axios入门
使用步骤:
-
导包
<!-- 官网提供的 axios 在线地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -
请求方式,以GET和POST举例
GETaxios.get(地址?key=value&key2=value2).then(function(response){},function(error) {});
POSTaxios.post(地址,{key:value,key2:value2}).then(function(response) {},function(error){})通过配置axios发出请求
// 进行请求，通过配置axios进行请求 axios( method: "GET", // 请求的方式，如果不指定方式，默认是GET请求 url: "http://localhost:8080/login", // 请求的地址 data: { // 请求的参数，通常是对象 id: 1 }, datatype : "json" }).then(function(response) {},function(error){}); -
根据接口文档, 访问测试接口,进行测试
接口1:随机笑话请求地址:https://autumnfish.cn/api/joke/list 请求方法:get 请求参数:num(笑话条数,数字) 响应内容:随机笑话接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg 请求方法:post 请求参数:username(用户名,字符串) 响应内容:注册成功或失败代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>axios接口测试</title> </head> <body> <input type="button" value="get请求" id="get"> <input type="button" value="post请求" id="post"> </body> <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> --> <!-- <script src="https://unpkg.com/axios@0.27.2/dist/axios.js"></script> --> <!-- <script src="./js/axios.js"></script> --> <script src="./js/axios.min.js"></script> <script> /* 请求地址:https://autumnfish.cn/api/joke/list 请求方法:get 请求参数:num(笑话条数,数字) 响应内容:随机笑话 */ document.getElementById("get").onclick = function () { axios.get("https://autumnfish.cn/api/joke/list?num=1").then( function (response) { //请求成功,调用 console.log(response); }, function(error){ //请求失败,调用 console.log(error) } ); } /* 请求地址:https://autumnfish.cn/api/user/reg 请求方法:post 请求参数:username(用户名,字符串) 响应内容:注册成功或失败 */ document.getElementById("post").onclick=function(){ axios.post("https://autumnfish.cn/api/user/reg",{username:"张百万"}) .then( function(response){ console.log(response); }, function(error){ console.log(error); } ); } </script> </html>axios总结
- axios 必须导包才能使用
- 使用get或者post方法,就可以发送请求
- then方法中的回调函数,会在请求成功或者请求失败的时候触发
- 通过回调函数的形参可以获取响应的内容,或者错误信息
2.2 获取笑话案例
通过vue+axios 完成一个获取笑话的案例.
接口: 随机获取一条笑话
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机笑话</title>
</head>
<body>
<div id="app"> <input type="button" value="点击获取一个笑话" @click="getJoke">
<p>{{joke}}</p>
</div>
</body>
<!-- 引入vue + axios -->
<script src="./js/axios.js"></script>
<script src="./js/vue.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<script>
/*
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话
*/
var VM = new Vue({
el: "#app",
data: {
joke: "笑笑更健康"
},
methods: {
getJoke: function () {
console.log(this.joke);
//笑笑更健康
var that = this;
//把this保存起来
//异步访问
axios.get("https://autumnfish.cn/api/joke").then(
function(response){
//获取data中的笑话
console.log(response.data);
//console.log(this.joke);
//undefined 没有获取到this
that.joke=response.data;
},
function(error){}
)
}
}
})
</script>
</html>
案例总结
- axios回调函数中this指向已经改变,无法访问data中的数据
- 解决方案: 将this进行保存,回调函数中直接使用保存的this即可
2.3 天气查询案例（链接已失效）
2.3.1 需求分析
功能分析: 回车查询
- 输入内容,点击回车 (v-on.enter)
- 访问接口,查询数据 (axios v-model)
- 返回数据,渲染数据
2.3.2 接口文档
请求地址:http://wthrcdn.etouch.cn/weather_mini
请求方法:get
请求参数:city (要查询的城市名称)
响应内容:天气信息
2.3.3 案例演示
自定义JS文件
作为一个标准的应用程序,我们将创建VUE实例的代码,抽取到main.js 文件中
main.js
/*
请求地址:http://wthrcdn.etouch.cn/weather_mini
请求方法:get
请求参数:city (要查询的城市名称)
响应内容:天气信息
*/
var VM = new Vue({
el:"#app",
data:{
city:'',
//定义空数组接收天气信息
weatherList:[]
},
//编写查询天气方法
methods: {
searchWeather:function(){
console.log("天气查询");
console.log(this.city);
//保存this,方便在回调函数中使用
var that = this;
//调用接口
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city) .then(
function(respose){
//console.log(respose);
//只获取天气数组
console.log(respose.data.data.forecast);
that.weatherList = respose.data.data.forecast;
},
function(error){}
);
}
}
})
天气查询页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气查询</title>
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo">天气查询</div>
<div class="form_group">
<!-- 3.绑定点击事件,回车触发,通过v-model绑定数据 -->
<input v-model="city" @keyup.enter="searchWeather" type="text"
class="input_txt" placeholder="请输入要查询的城市" />
<button class="input_sub">回车查询</button>
</div>
</div>
<ul class="weather_list">
<!-- 遍历天气信息 -->
<li v-for="item in weatherList">
<div class="info_type"><span class="iconfont">{{item.type}}</span> </div>
<div class="info_temp"> <b>{{item.low}}</b> ~<b>{{item.high}}</b> </div>
<div class="info_date"><span>{{item.date}}</span></div>
</li>
</ul>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script src="./js/vue.min.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="./js/axios.js"></script>
<!-- 2.引入自己的js -->
<script src="./js/main.js"></script>
</body>
</html>
案例总结
- 应用的逻辑代码,建议与页面进行分离,使用单独的JS编写
- axios回调函数中的 this的指向改变,无法正常使用, 需要另外保存一份
- 服务器返回的数据比较的复杂时,获取数据时要注意层级结构
2.4 解决页面闪烁问题
我们发现访问天气预报案例页面时, 使用插值表达式的地方出现了闪烁问题,如何解决呢?
v-cloak指令
- 作用: 解决插值表达式闪烁问题
当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
- 添加样式
<style> /* 通过属性选择器,设置 添加了v-cloak */ [v-cloak] { display: none; } </style> - 在id为app的div中添加 v-cloak
<div class="wrap" id="app" v-cloak>
扫一扫
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
