目录
一、Ajax
- 概念:Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
- 作用:更新部分网页,而不刷新全部页面。
练习一:指定用户名,进行判断,弹窗显示
后端判断
@RestController
public class AjaxController {
@RequestMapping("/d1")
public void demo01(String username, HttpServletResponse response, HttpServletRequest request) throws IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
System.out.println(username);
if ("admin".equals(username)){
response.getWriter().print("用户名:admin");
}else {
response.getWriter().print("用户名:未知");
}
}
前端显示
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
<script>
function lost() {
$.post({
url:"${pageContext.request.contextPath}/d1",
data:{"username":$("#username").val()},
success:function (data) {
console.log(data);
alert(data);
}
});
}
</script>
</head>
<body>
<div>
<input type="text" id="username" onblur="lost()">
</div>
</body>
</html>
练习二:点击显示数据,在控制台显示
后端判断
@RequestMapping("/d2")
public List<User> demo02(HttpServletResponse response, HttpServletRequest request) throws IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
User user01 = new User("张三", 3, 1);
User user02 = new User("李四", 4, 2);
User user03 = new User("王五", 5, 3);
User user04 = new User("赵六", 6, 4);
ArrayList<User> list = new ArrayList<User>();
list.add(user01);
list.add(user02);
list.add(user03);
list.add(user04);
return list;
}
前端页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>show</title>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
<script>
function show() {
console.log(123);
$.post("${pageContext.request.contextPath}/d2",function (data) {
console.log(data)
});
}
</script>
</head>
<body>
<input type="button" id="btn" value="加载数据" onclick="show()">
<table class="tab" border="2px" width="600px" align="center">
<tr>
<th>用户名</th>
<th>密码</th>
<th>登录次数</th>
</tr>
<c:forEach var="list" items="${list}">
<tr>
<th> ${booklist.bookID}</th>
<th>${list.name}</th>
<th>${list.age}</th>
<th>${list.loginCount}</th>
</tr>
</c:forEach>
</table>
</body>
</html>
练习三:检查用户名是否存在,弹出信息
后端判断
@RequestMapping(value = "/c1",produces={"text/html;charset=UTF-8;","application/json;"})
public String demo03(String username,HttpServletResponse response, HttpServletRequest request) throws IOException {
User user01 = new User("张三", 3, 1);
User user02 = new User("李四", 4, 2);
User user03 = new User("王五", 5, 3);
User user04 = new User("赵六", 6, 4);
ArrayList<User> list = new ArrayList<User>();
list.add(user01);
list.add(user02);
list.add(user03);
list.add(user04);
System.out.println("用户名:"+username);
String msg=null;
ArrayList<String> namelist = new ArrayList<String>();
for (User user : list) {
String name = user.getName();
namelist.add(name);
}
System.out.println("已存在用户:"+namelist);
if (!(namelist.contains(username))){
msg="OK";
}else{
msg="用户名已存在";
}
System.out.println("检查信息:"+msg);
return msg;
}
前端页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>检查用户名</title>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
<script>
function check() {
$.post({
url:"${pageContext.request.contextPath}/c1",
data:{"username":$("#username").val()},
success:function (data) {
console.log(data);
alert(data);
}
});
}
</script>
</head>
<body>
<div align="center">
用户名:<input type="text" id="username" onblur="check()">
</div>
</body>
</html>
中文乱码问题
后端的数据通过Ajax上传到前端页面时出现乱码
解决方法
在注解后添加produces={“text/html;charset=UTF-8;”,“application/json;”}
@RequestMapping(value = "/c1",produces={"text/html;charset=UTF-8;","application/json;"})
public String demo03(String username,HttpServletResponse response, HttpServletRequest request) throws IOException{
...
}
原因
注解是向ajax返回json数据格式的值,默认编码是“ISO-8859-1”,通过produces = {“application/json;charset=UTF-8”}来修改为utf-8编码,这样ajax接收到的数据就不会乱码了。
二、拦截器Interceptor
- 原理:依赖于web(SpringMVC)框架,实现是基于Java的反射机制
-
- 拦截器是面向切面编程AOP的具体应用:在service包或一个方法前/后调用一个方法
- 优点:一个拦截器实例在一个controller生命周期可以调用多次
- 缺点:只能对controller请求进行拦截
过滤器Filter
- 原理:依赖于Servlet容器,实现是基于函数回调
- 作用:过滤操作,获取想要的数据。
- 优点:可以对几乎所有的请求进行过滤
- 缺点:一个过滤器实例是能在容器初始化时调用一次。
- 场景:
-
- SpringMVC自带的CharacterEncodingFilter字符编码
-
- 修改Request参数的自定义过滤器,需要在web.xml中映射
拦截器与过滤器区别
Filter的执行顺序在Interceptor之前
执行顺序:请求———>Filter———>Interceptor———>DispatcherServlet
- Interceptor拦截器:功能更强大,Filter能做的事情,都能做,而且可以在请求前,请求后执行,比较灵活。
- Filter过滤器:主要是针对URL地址做一个编码的事情、过滤掉没用的参数、安全校验等。
拦截器步骤
- 编写controller请求
@RestController
public class testController {
@RequestMapping("/t01")
public String test01(){
System.out.println("测试请求01");
return "测试通过";
}
}
- 编写拦截器
public class testInterceptor implements HandlerInterceptor {
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
// return false; // 拦截请求,不放行
System.out.println("========处理请求前========");
return true; // 不拦截请求,放行
}
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
System.out.println("========处理请求后========");
}
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
System.out.println("========清理结束========");
}
}
- 编写配置文件
<!--配置拦截器-->
<mvc:interceptors>
<mvc:interceptor>
<!--配置拦截的路径-->
<mvc:mapping path="/**"/>
<!--配置自定义拦截器内容-->
<bean class="zy.interceptor.testInterceptor"/>
</mvc:interceptor>
</mvc:interceptors>
其中 /**:包括路径及其子路径
4. 运行及其结果
========处理请求前========
测试请求01
========处理请求后========
========清理结束========
案例:登录验证拦截
- 首页
<body align="center">
<h1>首页</h1>
<h1 style="color: lightpink">
<a href="${pageContext.request.contextPath}/new/tologin">登陆页面</a>
</h1>
<h1 style="color: skyblue">
<a href="${pageContext.request.contextPath}/loginSuccess">登陆成功页面</a>
</h1>
</body>
- controller请求
@Controller
public class loginController {
@RequestMapping("/new/tologin")
public String tologin(){
return "login";
}
@RequestMapping("/loginSuccess")
public String loginSuccess(){
return "loginSuccess";
}
@RequestMapping("/new/login")
public String login(HttpSession session, String username, String pwd){
System.out.println("登录页面");
session.setAttribute("USERNAME",username);
return "loginSuccess";
}
// 注销登录
@RequestMapping("/logout")
public String logout(HttpSession session, String username, String pwd){
session.removeAttribute("USERNAME");
return "login";
}
}
- 登录页面
<body align="center">
<form action="${pageContext.request.contextPath}/new/login" method="post">
用户名:<input type="text" name="username">
密码:<input type="password" name="pwd">
<input type="submit" value="登录">
</form>
</body>
- 登录成功页面
<body align="center">
<h1 style="color: salmon">进入登陆成功页面</h1>
<h2>用户名:${USERNAME}</h2>
<h2><a href="${pageContext.request.contextPath}/logout">注销</a></h2>
</body>
- 登陆拦截器
public class loginInterceptor implements HandlerInterceptor {
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
// 若session有值,则放行
HttpSession session = request.getSession();
if (session.getAttribute("USERNAME")!=null){
return true;
}
// 若是登录页面,则放行
System.out.println(request.getRequestURI());
if(request.getRequestURI().contains("new")){
return true;
}
// 否则 跳转到登录页面
request.getRequestDispatcher("/WEB-INF/jsp/login.jsp").forward(request, response);
return false;
}
}
- 配置拦截器
<!--配置拦截器-->
<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/**"/>
<bean class="zy.interceptor.loginInterceptor"/>
</mvc:interceptor>
</mvc:interceptors>