ajax，通过与后台服务器进行少量的数据交换，实现异步局部更新，不需要刷新整个页面。
ajax的核心是XMLHttpRequest对象(XHR),XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
常用参数：
url：请求地址
data：要发送的数据
success：成功之后执行的回调函数（全局）
实例1： 使用ajax前记得导入依赖
//若是下载在本地，webapp中需要指定绝对路径。cdn导入不需要
<script scr="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"/></script>
用户名<input type="text" id="textName" onblur="a1()"> //onblur失去焦点
<script>
/*
jQuery.post(...)
所有参数：
url：待载入页面的url地址（必填）
data：待发送key/value参数
success：载入成功时的回调函数{data：请求返回的数据，status：请求返回的状态}
*/
function a1(){
//ajax默认是get请求
$.ajax({
url:"${pageContext.request.contextPath}/ajax/a1", //请求路径根据自己实际情况更改。
data:{"name":$("#textName").val()}, //发送的数据，提交的name，取值之前定义的class="textName"中的数据
success:function(data,status){ //回调函数，携带data，status参数，data封装了服务器返回数据，status状态
console.log(data)
console.log(status)
}
});
</script>
实例2：(记得导入jq依赖)
<html>
<head>
<meta charset="utf-8"/>
<title>异步展示</title>
</head>
<body>
<input type="button" id="btn" value="获取数据"/> <!--定义一个button按钮，id控件：btn-->
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id="content">
</tbody>
</table>
<script>
$(function(){
$("#button").click(function(){ //.click点击触发事件
$.post("${pageContext.requeset.contextPath}/ajax/a2",function(data){
console.log(data); //控制台打印出返回的数据
var html=""; //定义html为空
for(var i=0;i<data.length;i++){ //将数据for循环获取
html+="<tr>"+
"<td>"+data[i].name+"</td>"+
"<td>"+data[i].age+"</td>"+
"<td>"+data[i].sex+"</td>"+
"</tr>"
}
$("#content").html(html); //将for循环获取到的数据，添加到html中
})
})
})
</script>
</body>
</html>
@RequestMapping("/a2")
@RequestBody
public List<User> ajax2(){
List<User> list = new ArrayList<>();
User user1 = new User("张三",1,"男");
User user2 = new User("里斯",2,"男");
User user3 = new User("王五",12,"男");
list.add(user1);
list.add(user2);
list.add(user3);
return list;
}
502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
