SpringMVC学习笔记6：Ajax初识
Posted Vincent9847
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SpringMVC学习笔记6：Ajax初识相关的知识，希望对你有一定的参考价值。
一、Ajax是什么？
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
- AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
- Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
二、Ajax应用
1.原始的HttpServletResponse处理
1.编写AjaxController
@Controller
public class AjaxController {
@RequestMapping("/test1")
public void ajax1(String name , HttpServletResponse response) throws IOException {
if ("ajax1".equals(name)){
response.getWriter().print("true");
}else{
response.getWriter().print("false");
}
}
}2.导入jquery
<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>3.编写页面
<%@ 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 test1(){
$.post({
url:"${pageContext.request.contextPath}/test1",
data:{'name':$("#txtName").val()},
success:function (data,status) {
alert(data);
alert(status);
}
});
}
</script>
</head>
<body>
<%--onblur：失去焦点触发事件--%>
用户名:<input type="text" id="txtName" onblur="test1()"/>
</body>
</html>4.结果
当我们鼠标离开输入框的时候，可以看到发出了一个ajax的请求！后台返回结果！
2.Springmvc实现
1.编写
@RestController
public class AjaxController {
@RequestMapping("/test1")
public List<User> ajax1(){
List<User> list = new ArrayList<User>();
list.add(new User("xiaoyi",1,"男"));
list.add(new User("xiaoer",2,"男"));
list.add(new User("xiaosan",3,"男"));
return list; //由于@RestController注解，将list转成json格式返回
}
}2.页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id="content">
</tbody>
</table>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
$.post("${pageContext.request.contextPath}/test1",function (data) {
console.log(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>"
}
$("#content").html(html);
});
})
})
</script>
</body>
</html>3.注册提示效果
4.获取接口
以上是关于SpringMVC学习笔记6：Ajax初识的主要内容，如果未能解决你的问题，请参考以下文章