10.Ajax异步请求
- Ajax即 Asynchronous Javascript And XML（异步JavaScript和XML在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的’新’方法 。 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
总之就是异步无刷新的请求
使用jQuery的库实现ajax
ajax
function ajax() {
$.post({
url:"${pageContext.request.contextPath}/ajax/j1",
data:{"name":$("#username").val()},
success:function(data){
alert(data);
}
})
}
name:
@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异步请求
![[springmvc]ajax异步请求数据详细简单](https://s2.loli.net/2022/07/26/IJW4beVxDUlvCK5.png)
![[springmvc]ajax异步请求数据详细简单](https://www.johngo689.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
![[springmvc]ajax异步请求数据详细简单](https://s2.loli.net/2022/07/26/6XsjYPyCTGtdroV.png)
使用ajax实现前后台对象数据交换
- 下面是jsp代码，当前台点击加载数据的时候，就会异步处理去后台拿取到所有用户的数据显示在前台
ajax
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);
}
});
}
name
age
sex
- 下面是后台代码，当收到前端请求，返回所有数据，在前后台分离时代，前端与后台只需做好各自的事情，实现相应的交接即可。
@RequestMapping("/ajax/j2")
@ResponseBody
public List ajax2(){
//模拟实体类为数据库数据
ArrayList users = new ArrayList();
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;
}
![[springmvc]ajax异步请求数据详细简单](https://s2.loli.net/2022/07/26/hQztDPIbfnYjFCZ.png)
Original: https://www.cnblogs.com/lumanmanqixiuyuanxi/p/16544576.html
Author: 路漫漫qixiuyuanxi
Title: [springmvc]ajax异步请求数据详细简单
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/619541/
转载文章受原作者版权保护。转载请注明原作者出处！