早些年的网站:单页面网站,所有的刷新都需要跳转,后来ajax出来之后,可以实现无刷新加载数据,在后台服务器进行少量的数据交换,就可以实现异步局部更新
1.准备工作
- 配置web.xml 和 springmvc的配置文件
- 配置applicationContextxml
- 编写控制类
- 实现具体功能的时候,只需要增加控制类和页面显示
2.具体案例的代码实现
1、ajax初体验,用 iframe 测试,感受下效果
ajax初体验
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>yangyang</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var myDate = new Date();
document.getElementById('currentTime').innerText = myDate.getTime();
};
function LoadPage(){
var targetUrl = document.getElementById('url').value;
console.log(targetUrl);
document.getElementById("iframePosition").src = targetUrl;
}
</script>
<div>
<p>请输入要加载的地址:<span id="currentTime"></span></p>
<p>
<input id="url" type="text" value="https://www.baidu.com/"/>
<input type="button" value="提交" onclick="LoadPage()">
</p>
</div>
<div>
<h3>加载页面位置:</h3>
<iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>
</body>
</html>
例1:标离开输入框的时候,可以看到发出了一个ajax的请求
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<html>
<head>
<title>Title</title>
<script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
百度:<input type="text" id="baidu" onblur="baidu()">
<script>
function baidu() {
alert(1)
}
</script>
</body>
</html>
例2:鼠标离开输入框的时候,可以看到发出了一个ajax的请求!后台返回给我们的结果!测试成功
控制类
@RequestMapping("/a1")
public String ajax(String name){
System.out.println(name);
return "ok";
}
页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
百度:<input type="text" name="name" id="baidu" onblur="baidu()">
<script>
function baidu(){
$.post({
url:'/a1',
data:{name:$("#baidu").val()},
success:function (data,status) {
console.log(data)
console.log(status)
}
});
}
</script>
</body>
</html>
例3:获取一个集合对象,展示到前端页面
@RequestMapping("/a2")
public List<User> ajax2(){
List<User> list = new ArrayList<User>();
list.add(new User("刘洋",3,"女"));
list.add(new User("刘洋",3,"女"));
list.add(new User("刘洋",3,"女"));
return list; //由于@RestController注解,将list转成json格式返回
}
把页面地址这里改成/a2
url:'/a2',
例4:数据回显到前端界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<input type="button" id="btn" value="点我"/>
<table width="90%" border="1px" align="center">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id="content">
</tbody>
</table>
<script>
$('#btn').click(function(){
$.post("/a2",function (data){
console.log(data);
//基本的dom操作
let html="";
for (let i = 0; i <data.length ; i++) {
html+= "<tr>" +
"<td>" + data[i].name + "</td>" +
"<td>" + data[i].age + "</td>" +
"<td>" + data[i].sex + "</td>" +
"</tr>"
}
$("#content").html(html);
})
})
</script>
</body>
</html>