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>
        <!--/*:表示所有资源
           /views/*: 访问/views下的资源时
           *.do: 访问.do结尾的资源时
        -->
        <url-pattern>/*</url-pattern>
    </filter-mapping>

基于注解：

  

二、 ajax异步请求

1.ajax使用场景

2. 如何实现异步操作

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

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

我们现在使用jquery

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

1. 第一步引入jquery的插件

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

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

2.点击事件

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

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

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

2. xml格式类型. 不建议使用了。人工智能数据

<name>张三</name>
<age>18</age>
​

1. 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();
    }