第91天学习打卡（SpringMVC Ajax jQuery.ajax SpringMVC拦截器）

最新推荐文章于 2024-09-21 22:20:54 发布

doudoutj

最新推荐文章于 2024-09-21 22:20:54 发布

阅读量164

点赞数

本文链接：https://blog.csdn.net/doudoutj/article/details/115559739

版权

Ajax

jQuery.ajax

纯JS原生实现Ajax我们不去讲解这里，直接使用jquery提供的，方便学习和使用，避免重复造轮子，有兴趣的同学可以去了解下JS原生XMLHttpRequest ！
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
jQuery 提供多个与 AJAX 有关的方法。
jQuery是一个库；用大量的js函数（方法）
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery 不是生产者，而是大自然搬运工。
jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！

jquer下载官网地址：https://jquery.com/download/

官网下载不了jQuery时点击官网给的链接右键另存为就下载了

min后缀的为压缩版 .js的为原生版

jQuery.ajax(...)
      部分参数：
            url：请求地址
            type：请求方式，GET、POST（1.9.0之后用method）
        headers：请求头
            data：要发送的数据
    contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
          async：是否异步
        timeout：设置请求超时时间（毫秒）
      beforeSend：发送请求前执行的函数(全局)
        complete：完成之后执行的回调函数(全局)
        success：成功之后执行的回调函数(全局)
          error：失败之后执行的回调函数(全局)
        accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
        dataType：将服务器端返回的数据转换成指定类型
          "xml": 将服务器端返回的内容转换成xml格式
          "text": 将服务器端返回的内容转换成普通文本格式
          "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
        "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
          "json": 将服务器端返回的内容转换成相应的JavaScript对象
        "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       https://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       https://www.springframework.org/schema/mvc/spring-mvc.xsd">

<!--自动扫描指定的包，下面所有注解类交给IOC容器管理-->
    <context:component-scan base-package="com.kuang.controller"/>
<!--    静态资源过滤-->
    <mvc:default-servlet-handler/>
    <mvc:annotation-driven/>
<!--    视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
          id="internalResourceViewResolver">
<!--前缀-->
        <property name="prefix" value="/WEB-INF/jsp/" />
<!--后缀-->
        <property name="suffix" value=".jsp" />
    </bean>
</beans>

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <script>
      function a(){
        $.post({
            url:"${pageContext.request.contextPath}/a1",
            data:{"name":$("#username").val()},
                //回调函数  成功也会回调  失败也会回调
            success:function (data){
                alert(data);

            },
            error:function (){
                
            }

                })
      }

    </script>
  </head>
  <body>
<%--失去焦点的时候，发起一个请求(携带信息)到后台--%>
 用户名: <input type="text" id="username" οnblur="a()">
  </body>
</html>

如果没有出现页面和响应要先检查下lib下面的包导入没还有代码是不是写错了

重定向和转发页面必须刷新

**HTML(必须精通) + css + js(超级熟练) **

js:

闭包（自己调自己）
DOM
- id name tag
- create remove
BOM：浏览器对象模型
- window
- document

ES6: import require

遇到的错误：Uncaught ReferenceError: html is not defined

问题原因是：$("#content").html(html); 没有在对应的括号内

正确写法：

<script>
$(function () {
    $("#btn").click(function () {
        /*
        * $.post(url, param[可以省略],success)
        *
        * */
        $.post("${pageContext.request.contextPath}/a2",function (data) {
          //  console.log(data);
            var html="";
            //let限定在了for里面只在这里面生效
            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>

user:

package com.kuang.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String name;
    private int age;
    private String sex;
}

AjaxController:

package com.kuang.controller;

import com.kuang.pojo.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@RestController//自动返回字符串
public class AjaxController {
    @RequestMapping("/t1")
    public String test() {
        return "hello";
    }

    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse response) throws IOException {
        System.out.println("a1:param=>" + name);
        if ("kuangshen".equals(name)) {
            response.getWriter().print("true");
        } else {
            response.getWriter().print("false");
        }
    }

    @RequestMapping("/a2")
    public List<User> a2() {
        ArrayList<User> userList = new ArrayList<User>();

        //添加数据
        userList.add(new User("狂神说Java", 1, "男"));
        userList.add(new User("狂神说前端", 1, "女"));
        userList.add(new User("狂神说运维", 1, "男"));
        return userList;


    }
    @RequestMapping("/a3")
    public String a3(String name, String pwd){
        String msg = "";
        if(name!=null){
            //admin  这些数据应该在数据库中查
            if("admin".equals(name)){
                msg = "ok";
            }else {
                msg = "用户名有误";

            }

        }
        if(pwd!=null){
            //123456 这些数据应该在数据库中查
            if("123456".equals(pwd)){
                msg = "ok";
            }else {
                msg = "密码有误";

            }

        }

        return msg;
    }

}

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe测试体验页面无刷新</title>
    <script>
        function go(){
            //所有的值 变量  ，提取获取
            var url = document.getElementById("url").value;
            document.getElementById("iframe1").src=url;

        }

    </script>

</head>
<body>
<div>
    <p>请输入地址:</p>
    <p>
        <input type="text" id="url" value="https://www.2345.com">
//     onclik点击这个按钮会触发事件
        <input type="button" value="提交" onclick="go()">

    </p>
</div>
<div>
    <iframe id="iframe1" style="width: 100%;height: 500px"></iframe>
</div>
</body>
</html>

test2.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <script>
$(function () {
    $("#btn").click(function () {
        /*
        * $.post(url, param[可以省略],success)
        *
        * */
        $.post("${pageContext.request.contextPath}/a2",function (data) {
          //  console.log(data);
            var html="";
            //let限定在了for里面只在这里面生效
            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>

</head>
<body>
<input type="button" value="加载数据" id="btn">
<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">
<%--    数据在后台--%>

    </tbody>
</table>

</body>
</html>

login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <script>
        function a1() {
            $.get({
                url:"${pageContext.request.contextPath}/a3",
                data:{"name":$("#name").val()},
             success:function (data){
                   // 三个= 是js中的符号，不仅判断值相同，还要判断也相同
                   if (data.toString()==='ok'){
                       $("#userInfo").css("color","green");

                   }else {
                       $("#userInfo").css("color","red");

                   }
                   $("#userInfo").html(data);
             }

            })

            
        }
        function a2() {
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"pwd":$("#pwd").val()},
                success:function (data){
                    if (data.toString()==='ok'){
                        $("#pwdInfo").css("color","green");

                    }else {
                        $("#pwdInfo").css("color","red");

                    }
                    $("#pwdInfo").html(data);
                }

            })

        }
    </script>
</head>
<body>
<%--onblur失去焦点事件  失去焦点就会触发上面的function a1()事件
span 是提示信息--%>
<p>
    用户名: <input type="text" id="name" οnblur="a1()">
    <span id="userInfo"></span>
</p>
<p>
    密码: <input type="text" id="pwd" οnblur="a2()">
    <span id="pwdInfo"></span>
</p>


</body>
</html>

SpringMVC拦截器

概述：

SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理。开发者可以自己定义一些拦截器来实现特定的功能。

**过滤器与拦截器的区别：**拦截器是AOP（横切进去的，不影响原来的性能，但可以实现拦截的效果）思想的具体应用。

过滤器

servlet规范中的一部分，任何java web工程都可以使用
在url-pattern中配置了/*之后，可以对所有要访问的资源进行拦截

拦截器

拦截器是SpringMVC框架自己的，只有使用了SpringMVC框架的工程才能使用
拦截器只会拦截访问的控制器方法，如果访问的是jsp/html/css/image/js是不会进行拦截的

1.从拦截级别上来说，springmvc是方法级别上的拦截，而struts2是类级别的拦截

2.数据独立性：springmvc方法间独立，独享request 和response

而struts2虽然方法也是独立的，但是所有的action变量是共享的

3.拦截机制：springmvc用的是独立的aop方式，struts2有自己的interceptor机制所以struts2的配置文件要大于springmvc

自定义拦截器

那如何实现拦截器呢？

想要自定义拦截器，必须实现 HandlerInterceptor 接口。

1、新建一个Moudule ， springmvc-07-Interceptor ，添加web支持

2、配置web.xml 和 springmvc-servlet.xml 文件

3、编写一个拦截器

定义拦截器

写一个类实现拦截器接口，并且注册在拦截器里面去拦截哪一个请求

applicationContext.xml：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       https://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <context:component-scan base-package="com.kuang.controller"/>

    <mvc:default-servlet-handler/>
    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
          id="internalResourceViewResolver">

        <property name="prefix" value="/WEB-INF/jsp/" />

        <property name="suffix" value=".jsp" />
    </bean>
<!--    拦截器-->
    <mvc:interceptors>
        <mvc:interceptor>
<!--            /** 包括这下面的所有请求  利用了横切aop的思想-->
            <mvc:mapping path="/**"/>
            <bean class="com.kuang.config.MyInterceptor"/>
        </mvc:interceptor>
         <mvc:interceptor>

            <mvc:mapping path="/user/**"/>
            <bean class="com.kuang.config.LoginInterceptor"/>
        </mvc:interceptor>
    </mvc:interceptors>
</beans>

MyInterceptor

package com.kuang.config;

import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MyInterceptor implements HandlerInterceptor {
    // return true 执行下一个拦截器，放行
    // return false 不执行下一个拦截器
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        System.out.println("=======处理前=======");
        return true;
    }
//拦截日志
    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
        System.out.println("================处理后=====================");
    }
    //拦截日志
    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
        System.out.println("============清理====================");
    }
}

LoginInterceptor:

package com.kuang.config;

import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class LoginInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        HttpSession session = request.getSession();
        //放行：判断什么情况下登录
        //登录页面也会放行
        if (request.getRequestURI().contains("goLogin")){
            return true;
        }
        //说明我在提交登录
        if (request.getRequestURI().contains("login")){
            return true;
        }
        //第一次登录，也是没有session的
        if (session.getAttribute("userLoginInfo")!= null){
            return true;
        }
        //判断什么情况下没有登录
        request.getRequestDispatcher("/WEB-INF/jsp/login.jsp").forward(request,response);

        return false;
    }
}

LoginController:

package com.kuang.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpSession;

@Controller
@RequestMapping("/user")
public class LoginController {
    @RequestMapping("/main")
    public String main(){
        return "main";
    }
    @RequestMapping("/goLogin")
    public String login(){
        return "login";
    }
    @RequestMapping("/login")
    public String login(HttpSession session, String username, String password, Model model){
        System.out.println("login==>" + username);
        //把用户的所有信息存在session中
        session.setAttribute("userLoginInfo",username);
        model.addAttribute("username",username);
        return "main";
    }
    @RequestMapping("/goOut")
    public String goOut(HttpSession session){
        //session.invalidate();//毁了session
      session.removeAttribute("userLoginInfo");//移除
        return "main";
    }
}

TestController

package com.kuang.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class TestController {
    @GetMapping("/t1")
    public String test(){
        System.out.println(" TestController==>test()执行了");
        return "OK";
    }
}

login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%--在web-inf下的所有页面或者资源，只能通过controller 或者servlet进行访问--%>
<h1>登录页面</h1>

<form action="${pageContext.request.contextPath}/user/login" method="post">
    用户名: <input type="text" name="username"/>
    密码: <input type="text" name="password"/>
    <input type="submit" value="提交">
</form>
</body>
</html>

main.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<h1>首页</h1>
<%--span标签取出username--%>
<span>${username}</span>

<p>
    <a href="${pageContext.request.contextPath}/user/goOut">注销</a>
</p>
</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  <h1><a href="${pageContext.request.contextPath}/user/goLogin">登录页面</a></h1>
  <h1><a href="${pageContext.request.contextPath}/user/main">首页</a></h1>
  </body>
</html>