发送异步请求.
通过jquery中的方法完成异步的请求。
$.get(url,data,function(result){},type)
$.post(url,data,function(result){},type)
服务器返回的都是json数据。ssm 后端返回的类型必须统一R.
axios发送异步请求。因为jquery异步请求方式只有get和post模式，无法满足后台接口的需求。而且axios发送异步请求可以和好的和vue结合。
1 axios异步请求的语法
get请求
axios.get(url?k=v&k2=v2).then(function(result){})
--function:表示成功后触发的函数。 result:接受服务器响应的数据。
简洁语法: 省略function。并使用=>符号
axios.get(url?k=v&k2=v2).then(result=>{})
post请求
axios.post(url,data).then(result=>{})
-- data:格式 {k:v,k2:v}
delete请求
axios.delete(url?k=v).then(result=>{})
put请求
axios.put(url,data).then(result=>{})
2 使用
<%--
Created by IntelliJ IDEA.
User: ldh
Date: 2024/10/16
Time: 9:39
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="/js/vue.js"></script>
<!--引用网络的js文件-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!--通过axios发送异步请求获取所有学生得到信息并展示在网页中-->
<div id="app">
<table width="600" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>出生日期</th>
<th>头像</th>
<td>班级</td>
</tr>
<!--jstl标签-->
<tr v-for="s in students">
<td>{{s.id}}</td>
<td>{{s.name}}</td>
<td>{{s.age}}</td>
<td>{{s.gender}}</td>
<td>{{s.birthday}}</td>
<td>
<img :src="s.headimg" width="80"/>
</td>
<td>
{{s.classInfo.name}}
</td>
</tr>
</table>
</div>
</body>
<script>
let app = new Vue({
el: "#app",
data: {
students: undefined, // 表示所有的学生。
},
created() { // 页面加载的时候就执行这个方法
this.loadStudent();
},
methods: {
//加载所有学生信息.
loadStudent() {
axios.get("/student/list").then(resp => {
if(resp.data.code===200){ //===:比较值和数据类型 ==：只比较值
//吧查询的结果赋值给students数据。
this.students=resp.data.data;
}
})
}
}
})
</script>
</html>