JavaWeb学习、过滤器、ajax异步请求、json、jquery-api文档

一、过滤器：

按照过滤规则筛选出想要的资源。为什么使用过滤器？

1. 很多地方都需要判断是否登录。如果我们在每个资源出进行判断，非常麻烦。我们可以使用过滤器在访问这些资源前进行判断。

（这样就不用在主界面，修改，删除界面加判断语句了
  <c:if test="${sessionScope.user==null}">
        <c:redirect url="/login.jsp"/>
    </c:if>--%>复制
）

2.如何定义过滤器：

创建一个类并实现Filter接口重写方法：

案例01

如果不登录无法访问其他资源

package com.zyl.Filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
* @className: MyFilter
* @author: Zyl
* @date: 2024/12/9
* @Version: 1.0
* @description:
*/
@WebFilter(urlPatterns = "/*")
public class MyFilter implements Filter {
    @Override
    //初始化过滤器
    public void init(FilterConfig filterConfig) throws ServletException {
//        Filter.super.init(filterConfig);
        System.out.println("过滤器的初始方法，只会调用一次");
    }

    @Override
    //过滤器过滤方法
    //Httpservlet是ServletRequest的子接口，儿子接口功能更多，强制转换
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
       // System.out.println("过滤器的过滤方法，会调用多次");
        HttpServletRequest req = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        //获取请求资源的路径
        String path = req.getServletPath();
        //打印
        System.out.println(path);
        //判断该路径是否为白名单
        if("/login.jsp".equals(path)||"/register.jsp".equals(path)||"/user".equals(path)||path.startsWith("/images")){
            //如果是，就放行
            filterChain.doFilter(servletRequest,servletResponse);
        }else{
            //不是就判断是否登录，登录就放行，否则就跳转回登录页面
            Object user = req.getSession().getAttribute("user");
            if(user!=null){
                filterChain.doFilter(servletRequest,servletResponse);
            }else{
               response.sendRedirect("/login.jsp");
            }
        }
    }

    @Override
    //销毁过滤器
    public void destroy() {
       // Filter.super.destroy();
        System.out.println("过滤器销毁时调用该方法，当服务器重启或关闭时");
    }
}

注册过滤器--类似servlet

<filter>
<filter-name>MyFilter</filter-name>
<filter-class>com.zyl.Filter.MyFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>MyFilter</filter-name>

<url-pattern>/*</url-pattern>
</filter-mapping>

基于注解：

二、 ajax异步请求

1.ajax使用场景

2. 如何实现异步操作

自己通过js代码向后台发送异步请求. [非常复杂]

使用第三方封装好的js代码--【jquery axios结合vue使用更加完美】

我们现在使用jquery

jquery就是对我们js的进一步封装，使操作js更加方便的一个前端插件。

1. 第一步引入jquery的插件

jquery下载所有版本（实时更新）

  <%--引入jquery文件--%>
  <script src="/js/jquery-3.5.1.min.js"></script>复制

2.点击事件

3. 服务器响应的数据类型

我们刚才服务器响应的数据类型都是文本类型。服务器响应的数据类型有三种:

文本类型。基本数据类型的值，字符串类型的值

xml格式类型. 不建议使用了。人工智能数据
<name>张三</name>
<age>18</age>
复制
json格式的数据。--就是这种数据格式

三、什么是json

JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON
是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。

json对象:
{k1:v1,k2:v2,k3:v3....}

json对象集合:
[
   {k:v,k:v},
   {k:v,k:v},
   {k:v,k:v}
]

规则如下:
1）映射用冒号（“：”）表示。名称:值
2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2
3）映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}
4）并列数据的集合（数组）用方括号(“[]”)表示。
[
{名称1:值,名称2:值2},
{名称1:值,名称2:值2}
]
5 元素值可具有的类型：string, number, object, array, true, false, null
6. 调用json对象中数据: 对象名.key

1. 使用封装的jar完成json的转换

第三方公司就封装一个jar。该jar中提供了很多类完成java转换成json对象。

public static void main(String[] args) {
User user=new User("闫四安",19);
String s = JSON.toJSONString(user);//把一个java对象转换为json对象
System.out.println(s); //版本太高

List<User> list=new ArrayList<>();
list.add(new User("李佳琪",18));
list.add(new User("戴柏辛",18));
list.add(new User("左怀甫",18)); //[{"name":"李佳琪","age":18},{},{}]

String s1 = JSON.toJSONString(list);
System.out.println(s1);

}

综合案例

Ajax请求所有用户数据，把服务器响应的数据以表格的形式展示

ajax2.jsp:

<%--
Created by IntelliJ IDEA.
User: ldh
Date: 2024/9/25
Time: 15:25
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="/js/jquery.min.js"></script>
</head>
<%--onload:表示页面加载完毕后执行的js函数. onclick点击事件 onblur失焦事件 onload页面加载事件--%>
<body οnlοad="loadUser()">

<table border="1" cellspacing="0" cellpadding="0" width="500" align="center" >
<tr>
<th>编号</th>
<th>账号</th>
<th>密码</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tbody id="userTable">

</tbody>
</table>
</body>
<script>
function loadUser() {
// 使用jQuery的get方法发送GET请求到"/UserServlet"，回调函数处理返回的结果
$.get("/UserServlet", function (result) {
// 获取页面上id为"userTable"的表格元素
var userTable = document.getElementById("userTable");
// 用于动态生成表格内容的字符串变量
var str = "";
// 遍历结果集，生成表格的每一行内容
for (let i = 0; i < result.length; i++) {
// 开始拼接一个表格行
str += "<tr>";
// 拼接用户ID单元格
str += "<td>" + result[i].id + "</td>";
// 拼接用户名单元格
str += "<td>" + result[i].username + "</td>";
// 拼接用户密码单元格
str += "<td>" + result[i].password + "</td>";
// 拼接用户真实姓名单元格
str += "<td>" + result[i].realname + "</td>";
// 拼接包含删除按钮的单元格
str += "<td><button οnclick=''>删除</button></td>";
// 完成一个表格行的拼接
str += "</tr>";
}
// 将拼接好的字符串设置为表格的innerHTML，动态更新表格内容
userTable.innerHTML=str;
}, "json"); // 指定返回数据类型为json
}
</script>
</html>

UserServlet:

private void selectAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
List<User> users = userDao.selectAll();//获取数据库中所有的用户
//把java集合对象转换为json集合对象
String json = JSON.toJSONString(users);
//获取输出对象
PrintWriter out = resp.getWriter();
out.println(json);

//刷新输出对象
out.flush();
//关闭输出对象
out.close();
}