一.简介
Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
利用AJAX可以做：
-
注册时，输入用户名自动检测用户是否已经存在。
-
登陆时，提示用户名密码错误
-
删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
-
....等等
jquary ajax
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery 不是生产者，而是大自然搬运工。
jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！
二.使用(jquary ajax)
1.导入jquary.js(在线cdn或在线导入)
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
2.controller
@Controller
public class AjaxController {
@RequestMapping("/a1")
public void ajax1(String name , HttpServletResponse response) throws IOException{
if ("admin".equals(name)){
response.getWriter().print("true");
}else{
response.getWriter().print("false");
}
}
}
3.index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
<script>
function a1(){
$.post({
url:"${pageContext.request.contextPath}/a1",
data:{'name':$("#txtName").val()},
success:function (data,status) {
alert(data);
alert(status);
}
});
}
</script>
</head>
<body>
<%--onblur：失去焦点触发事件--%>
用户名:<input type="text" id="txtName" onblur="a1()"/>
</body>
</html>
三.获取集合对象(ajax)
实体类user
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private String name;
private int age;
private String sex;
}
我们来获取一个集合对象，展示到前端页面
@RequestMapping("/a2")
public List<User> a2(){
ArrayList<User> users = new ArrayList<User>();
users.add(new User("马云","男",40));
users.add(new User("马化腾","男",44));
users.add(new User("王健林","男",30));
return users; //由于@RestController注解，将list转成json格式返回
}
前端页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<script src="${pageContext.request.contextPath}/jquery/jquery-3.5.1.js"></script>
<script>
$(function () {
$("#btn").click(function () {
/*简写:data可以省略
<%--$.post("${pageContext.request.contextPath}/a2",function () {})*/--%>*/
$.get("${pageContext.request.contextPath}/a2", function (data) {
var html = "";
for (let i = 0; i < data.length; i++) {
html+="<tr>"+
"<td>"+data[i].name+"</td>"+
"<td>"+data[i].sex+"</td>"+
"<td>"+data[i].age+"</td>"+
"</tr>"
}
$("#concent").html(html)
})
})
})
</script>
<title>Title</title>
</head>
<body>
<input type="button" value="点击加载信息" id="btn">
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tbody id="concent">
</tbody>
</table>
</body>
</html>