[springmvc]ajax异步请求数据详细简单
10.Ajax异步请求
- Ajax即Asynchronous Javascript And XML（异步JavaScript和XML在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法 。 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
总之就是异步无刷新的请求
使用jQuery的库实现ajax
<%--
Created by IntelliJ IDEA.
User: 塔塔
Date: 2022/7/25
Time: 20:34
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ajax</title>
<script src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
</head>
<body>
<script>
function ajax() {
$.post({
url:"${pageContext.request.contextPath}/ajax/j1",
data:{"name":$("#username").val()},
success:function(data){
alert(data);
}
})
}
</script>
<p>name:<input type="text" id="username" onblur="ajax()"></p>
</body>
</html>
@RequestMapping("/ajax/j1")
@ResponseBody
public void ajax(String name, HttpServletResponse res) throws IOException {
System.out.println(name+"this is name value");
if(name.equals("panglili")){
res.getWriter().write("true");
}else{
res.getWriter().write("false");
}
}
在表单失去焦点的一瞬间，前端就向后台发起了ajax异步请求
使用ajax实现前后台对象数据交换
- 下面是jsp代码，当前台点击加载数据的时候，就会异步处理去后台拿取到所有用户的数据显示在前台
<%--
Created by IntelliJ IDEA.
User: 塔塔
Date: 2022/7/25
Time: 20:34
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ajax</title>
<script src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
</head>
<body>
<script>
function ajax() {
$.post({
url:"${pageContext.request.contextPath}/ajax/j2",
// data:{"name":$("#username").val()},
success:function(data){
var html="";
for(var i=0;i<data.length;i++){
html+="<tr>"+
"<td>"+data[i].name+"</td>"+
"<td>"+data[i].age+"</td>"+
"<td>"+data[i].sex+"</td>"+
"</tr>"
}
$("#tab").html(html);
}
});
}
</script>
<p><input type="button" id="btn" value="load data" onclick="ajax()"></p>
<table>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<tbody id="tab">
</tbody>
</table>
</body>
</html>
- 下面是后台代码，当收到前端请求，返回所有数据，在前后台分离时代，前端与后台只需做好各自的事情，实现相应的交接即可。
@RequestMapping("/ajax/j2")
@ResponseBody
public List<User> ajax2(){
//模拟实体类为数据库数据
ArrayList<User> users = new ArrayList<User>();
User user1 = new User("xiaoming",19,"nan");
User user2 = new User("xiaozhang",19,"nan");
User user3 = new User("xiaohong",19,"nan");
users.add(user1);
users.add(user2);
users.add(user3);
return users;
}
