SpringMVC-02-Ajax，拦截器，文件上传下载

最新推荐文章于 2022-03-16 16:13:47 发布
最新推荐文章于 2022-03-16 16:13:47 发布
阅读量244 收藏
点赞数 1
分类专栏： JavaEE 文章标签： springmvc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38869493/article/details/118826236
版权

文章目录


SSM完整笔记

官网文档

八：Ajax研究

1. 什么是Ajax？
  • AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
  • Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
  • 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。
  • AJAX业务场景：注册时输入用户名自动检测用户是否存在，登陆时提示用户名密码错误等。
  • AJAX优点：传统请求需要重新加载整个网页，使用此技术，可实现小部分数据交互，节省服务器资源，对用户也更加友好。
2. 一个Ajax示例
  • 功能：前端输入用户名信息，异步检测用户名是否正确或已存在
  • 前端构建两个输入框，并绑定失去焦点事件
<body>
    <p>
        用户名：<input type="text" id="name" onblur="a1()">
        <span id="userInfo"></span>
    </p>
    <p>
        密码：<input type="text" id="pwd" onblur="a2()">
        <span id="pwdInfo"></span>
    </p>
</body>
  • 失去焦点事件内部，发送ajax请求，此时默认为post请求，否则要使用$.ajax，内部提供方法参数。使用ajax需要引入JQuery，下载链接：https://jquery.com/download/
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>

function a1() {
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"name":$("#name").val()},
                success:function (data) {
                    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);
                }
            })
        }
  • 后端写两个请求方法接收ajax请求，由于此控制类写了@RestController注解，所以不会走视图解析器，也就没再用@ResponseBody注解了。此处后端数据验证只是简单的判断，真是代码场景中需要完整的逻辑处理。
@RequestMapping("/a3")
public String a3(String name,String pwd){
    String msg = "";
    if(name!=null){
        if("admin".equals(name)){
            msg="ok";
        }else {
            msg="error";
        }
    }
    if(pwd!=null){
        if("password".equals(pwd)){
            msg="ok";
        }else {
            msg="error";
        }
    }
    return msg;
}
  • 前端输入数据失去焦点后，会自动在旁边弹出ok或error

九：拦截器

  • 拦截器是MVC框架中所拥有的概念，类似于Servlet开发中的过滤器Filter
  • 拦截器默认静态资源过滤，只会拦截访问的控制器方法
1.拦截器实现
  • 对于SpringMVC来说，要实现一个拦截器，在自定义类中实现HandlerInterceptor 接口即可。
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("清理==========================");
    }
}
2. 自定义登陆过滤拦截器
  • 当用户没有进行登陆的时候，点击main界面会自动跳转到login界面
  • 此处对于是否登录的验证是判断session中是否有userLogin属性（用户登录时会自动添加此属性，登出时会自动删除此属性）
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("Login")){
            System.out.println("页面放行");
            return true;
        }
        /*如果已登陆，则毫无影响*/
        if(session.getAttribute("userLogin")!=null){
            return true;
        }
        /*否则进行拦截，跳转到登陆页面*/
        request.getRequestDispatcher("/WEB-INF/jsp/login.jsp").forward(request,response);
        return false;
    }
}
3. 在springmvc-config配置文件中声明自己写的拦截器，在interceptor下可以配置多个拦截器，每个拦截器配置需要拦截那些控制层请求路径。
<!--拦截器配置-->
<mvc:interceptors>
    <mvc:interceptor>
        <!--/**:包括这个请求下面的所有请求-->
        <mvc:mapping path="/**"/>
        <bean class="com.chelsea.interceptor.MyInterceptor"/>
    </mvc:interceptor>
    <mvc:interceptor>
        <mvc:mapping path="/user/**"/>
        <bean class="com.chelsea.interceptor.LoginInterceptor"/>
    </mvc:interceptor>
</mvc:interceptors>
4. 编写简单的控制层进行测试，如果用户名不为空则进行登录，同时将用户名存入session中，注销时移除此属性即可。
@Controller
@RequestMapping("/user")
public class LoginController {

    @RequestMapping("/Login")
    public String login(String username, String password, HttpSession session, Model model){
        //把用户信息放入session
        session.setAttribute("userLogin",username);
        model.addAttribute("username",username);
        return "main";
    }

    @RequestMapping("/main")
    public String main(){
        return "main";
    }

    @RequestMapping("/goLogin")
    public String goLogin(){
        return "login";
    }

    @RequestMapping("/logout")
    public String goOut(HttpSession session){
        /*如果是这种方式注销session，用户浏览器没有关闭，还有其他请求，会频繁创建销毁session效率极低*/
        //session.invalidate();
        /*这种方法退出最好，已经达到了退出登陆的功能*/
        session.removeAttribute("userLogin");
        return "main";
    }

}

十：文件上传下载

  • 文件上传下载是很常规的操作，SpringMVC对文件的上传有很好的支持，但需要提前进行显式配置
  • 为了能成功上传文件，必须将表单的method设置为POST，并且将表单的enctype属性设置为multipart/form-data。只有在这样的情况下，浏览器才会把用户选择的文件以二进制数据发送给服务器。
1. 前端表单
<form action="/upload" enctype="multipart/form-data" method="post">
    <input type="file" name="file">
    <input type="submit" name="upload">
</form>
2. SpringMVC中对于文件上传的配置
<!--文件上传配置-->
<bean class="org.springframework.web.multipart.commons.CommonsMultipartResolver" id="multipartResolver">
    <!--请求的编码格式，必须和jsp的pageEncoding属性一致，一边正确读取表单的内容，默认为ISO-8859-1-->
    <property name="defaultEncoding" value="utf-8"/>
    <!--上传文件大小上限，单位为字节（10485760=10M）-->
    <property name="maxUploadSize" value="10485760"/>
    <property name="maxInMemorySize" value="40960"/>
</bean>
3. 前端Controller编写，定义文件上传路径等
//@RequestParam("file") 将name=file控件得到的文件封装成CommonsMultipartFile 对象
//批量上传CommonsMultipartFile则为数组即可
@RequestMapping("/upload")
public String fileUpload(@RequestParam("file") CommonsMultipartFile file , HttpServletRequest request) throws IOException {

    //获取文件名 : file.getOriginalFilename();
    String uploadFileName = file.getOriginalFilename();

    //如果文件名为空，直接回到首页！
    if ("".equals(uploadFileName)){
        return "redirect:/index.jsp";
    }
    System.out.println("上传文件名 : "+uploadFileName);

    //上传路径保存设置
    String path = request.getServletContext().getRealPath("/upload");
    //如果路径不存在，创建一个
    File realPath = new File(path);
    if (!realPath.exists()){
        realPath.mkdir();
    }
    System.out.println("上传文件保存地址："+realPath);

    InputStream is = file.getInputStream(); //文件输入流
    OutputStream os = new FileOutputStream(new File(realPath,uploadFileName)); //文件输出流

    //读取写出
    int len=0;
    byte[] buffer = new byte[1024];
    while ((len=is.read(buffer))!=-1){
        os.write(buffer,0,len);
        os.flush();
    }
    os.close();
    is.close();
    return "redirect:/index.jsp";
}
  • 另一种方法：使用CommonsMultipartFile类方法进行保存上传的文件，更加简单。
/*
 * 采用file.Transto 来保存上传的文件
 */
@RequestMapping("/upload2")
public String  fileUpload2(@RequestParam("file") CommonsMultipartFile file, HttpServletRequest request) throws IOException {

    //上传路径保存设置
    String path = request.getServletContext().getRealPath("/upload");
    File realPath = new File(path);
    if (!realPath.exists()){
        realPath.mkdir();
    }
    //上传文件地址
    System.out.println("上传文件保存地址："+realPath);

    //通过CommonsMultipartFile的方法直接写文件（注意这个时候）
    file.transferTo(new File(realPath +"/"+ file.getOriginalFilename()));

    return "redirect:/index.jsp";
}
  • 此时在前端点击上传文件即可。
4. 下载文件
  • 第一种方式：在前端直接编写一个a标签，连接到本地资源即可
<a href="${pageContext.request.contextPath}/static/1.jpg"></a>
  • 第二种方法：编写后端业务进行下载（一般第一种方式就够用了）
@RequestMapping(value="/download")
public String downloads(HttpServletResponse response , HttpServletRequest request) throws Exception{
    //要下载的图片地址
    String  path = request.getServletContext().getRealPath("/upload");
    String  fileName = "基础语法.jpg";

    //1、设置response 响应头
    response.reset(); //设置页面不缓存,清空buffer
    response.setCharacterEncoding("UTF-8"); //字符编码
    response.setContentType("multipart/form-data"); //二进制传输数据
    //设置响应头
    response.setHeader("Content-Disposition",
            "attachment;fileName="+ URLEncoder.encode(fileName, "UTF-8"));

    File file = new File(path,fileName);
    //2、 读取文件--输入流
    InputStream input=new FileInputStream(file);
    //3、 写出文件--输出流
    OutputStream out = response.getOutputStream();

    byte[] buff =new byte[1024];
    int index=0;
    //4、执行 写出操作
    while((index= input.read(buff))!= -1){
        out.write(buff, 0, index);
        out.flush();
    }
    out.close();
    input.close();
    return null;
}

前端调用请求即可（适用于固定文件）

<a href="/download">点击下载</a>
Lion_H
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能
01-21
Ajax文件下载 利用 FormData 对象和 Spring MVC 配合可以实现Ajax文件上载功能: 步骤 1.导入组件并准备静态脚本 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.2</version> </dependency> <h1>Ajax 文件上载</h1> <input type=file id=file1> <br> <input type=file id=file2>
SpringMVC：Ajax技术
weixin_42584545的博客
10-30 192
SpringMVC：Ajax技术 文章目录SpringMVC：Ajax技术简介jQuery.ajaxSpringmvc实现注册提示效果9.5、获取baidu接口Demo 简介 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 Ajax 不是一种新的编...
SpringMVC【Ajax、拦截器、文件上传和下载】
程序员战胜
03-16 1507
目录：一、Ajax使用：二、SpringMVC拦截器三、文件上传和下载 一、Ajax使用： 1. index.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>首页</title> <script src="${pageContext.request.contextPath}/static
spring mvc文件下载 及 ajax异步上传图片
Pursuit的博客
01-13 1261
最近在工作中需要用到ajax异步上传图片功能, 然而ajax原生不支持, 所以我在网上也查阅了很多资料, 最后成功实现 网上类似的文章肯定很多, 在这之前我也参考了参考了好多资料 ,最终才完成这个功能 ,.这篇文章的方法可行性,也是经过了我的验证的, 就姑且写个原创吧 ... 文章的内容有人很简单, 大神勿喷.... 首先说上传吧 ajax异步上传图片功能, 需要借助 jquery
springmvc ajax 文件上传下载文件 multiple
05-23
springmvc 上传下载文件，支持 ajax，form 提交，支持 multiple 方式上传文件
springmvc-ajax:springmvc-ajax 前端后端ajax通信
05-05
1. **配置DispatcherServlet**：确保Spring MVC配置文件中已经配置了DispatcherServlet，它负责拦截请求并将其转发到合适的控制器。 2. **创建控制器方法**：在Spring MVC的控制器类中，我们需要定义一个处理Ajax...
SpringMVC-02.doc
03-01
本文将深入讲解Spring MVC的核心概念，包括ModelAndView的使用、数据交互、控制器注解、RESTFul风格案例、文件上传、拦截器及综合案例。 1. **Spring MVC架构** - **Model**：模型层，通常由Java对象（如领域模型...
SpringMVC-02教案1
08-08
SpringMVC的拦截器是一种AOP（面向切面编程）概念的应用，可以在请求处理前后执行自定义逻辑，如权限检查、日志记录等。创建自定义拦截器需实现HandlerInterceptor接口，然后在Spring配置中注册。 以上内容是...
springmvc实现登录注册，拦截器的使用，ajax的验重练习demo代码演示
最新发布
03-05
在本项目中，我们主要探讨的是如何利用SpringMVC实现登录注册功能，同时结合Ajax进行数据验证，并且应用拦截器来增强系统安全性和用户体验。这是一个典型的Web应用开发实践，涉及了多个关键技术和概念。 首先，...
如何基于ssm框架实现springmvc拦截器
08-18
实现SpringMVC拦截器需要两步：写一个类实现HandlerInterceptor接口，和在SpringMVC的配置文件中配置拦截器。 首先，写一个类实现HandlerInterceptor接口。HandlerInterceptor接口定义了三个方法：preHandle、...
SpringMVC使用ajax 实现文件下载
HaHa_Sir的博客
07-16 7051
SpringMVC使用ajax 实现文件下载一、说明结论1、 ajax 是无法实现文件下载的，原因：ajax请求只是个“字符型”的请求，即请求的内容是以文本类型存放的。文件的下载是以二进制形式进行的，虽然可以读取到返回的response，但只是读取而已，是无法执行的。 （ 引用自这里 ）二、文件下载后台代码@RequestMapping(value="/downloadFile") publi...
文件下载:springMVC中使用ajax请求文件下载问题
zysen1995的博客
01-17 2378
近期在学习springMVC与easyui的过程中遇到的文件下载问题。在springMVC中下载文件，如下载图片、导出数据报表时。如果使用ajax发送请求，不能直接解析获取response.getOutputStream()中的数据。后台Controller代码：@RequestMapping("/export") public void exportUser(HttpServletRespon
spring mvc + ajax实现无刷新下载文件
javaloveiphone的专栏
04-13 1万+
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的数据。在实现过程中，页面也没有进行刷新。前端代码：<a href="JavaScript:downloadFile('${fileName }')">${fil
SpringMVC+ajax文件上传实例教程
热门推荐
言诺liang
07-26 1万+
文件上传 文件上传是项目开发中最常见的功能。为了能上传文件，必须将表单的method设置为POST，并将enctype设置为multipart/form-data。只有在这样的情况下，浏览器才会把用户选择的文件以二进制数据发送给服务器。 一旦设置了enctype为multipart/form-data，浏览器即会采用二进制流的方式来处理表单数据，而对于文件上传的处理则涉及在服务器端解析原始的H...
springmvc+Ajax实现文件下载
weixin_44696786的博客
03-30 1034
DataTable中的一列添加实现文件下载 {"data": "filename","sDefaultContent" : "","sClass" : "hidden-480", render: function(data,type,row,meta){ if (row.drawingtype=='05'){ return '<a href="javascript:down...
springMVC中文件下载（ajax好像不行）
哈喽羊
07-01 1198
在做项目时，要做个到指定目录下载文件，首先要引入jar包，Apache-commons系列中的fileupload；下面是controler层的程序package com.ygoa.controller; @Controller public class FileController { @Autowired private ExtractExcel extractExcel;...
SpringMVC+Ajax文件批量上传和下载
lishuangting的博客
01-14 7597
今天做了文件的上传下载，小小总结一下，基本的web项目建立及SpringMVC框架搭建此处不详细写出来了。 上传form：               上传Ajax： /*  * 上传文件  */ function upload(){     var formData = new FormData($( "#uploadfiles" )[0]);  
SpringMVC入门教程：从快速入门到深入分析
4. **配置文件详解** - `mvc.xml` 配置文件是Spring MVC应用的关键，它定义了URL映射、视图解析器、拦截器等设置。 5. **静态文件处理** - 如何配置Spring MVC来访问和处理静态资源，例如CSS、JS和图片文件。 6. *...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值