Spring 全家桶之 Spring Web MVC(六)- AJAX & Fileupload(下)

简介: Spring 全家桶之 Spring Web MVC(六)- AJAX & Fileupload

HttpEntity<T>

HttpEntity是指请求和响应的实体类,包含了消息头和消息体,可以从该类中获取请求头请求体以及响应头响应体信息。

在AnotherController中新增一个httpEntity方法,接收一个HttpEntity类为参数

@RequestMapping("/http_entity")
public String httpEntity(HttpEntity<String> str){
    System.out.println(str);
    return "success";
}
复制代码

修改post.jspy页面中的表单的请求地址为/http_entity

<h2>使用表单发送POST请求</h2>
<div>
    <form action="/http_entity" method="post">
        <input name="username" value="stark">
        <input name="password" value="123456">
        <input type="submit">
    </form>
</div>
复制代码

重新启动该应用,浏览器打开post.jsp页面,点击发送按钮发送表单请求

0a1d87cf54da4bae8d03fa5f71fb9432_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

控制台打印出消息体对象

@ResponseBody、ResponseEntity 与文件下载

该注解会将相应内容放在响应体中

@ResponseBody
@RequestMapping("/hello")
public String hello(){
    return "success";
}
复制代码

访问/ha不会返回success页面,会直接返回字符串success

941b5f1e07be4c37bafaaafb07d3abf6_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

还可以自定义响应实体,这要求方法返回ResponseEntity

@RequestMapping("/hallo")
public ResponseEntity<String> hallo(){
    // 定义响应请求头
    MultiValueMap<String, String> headers =new HttpHeaders();
    // 定义响应体
    String body = "<h2>SUCCESS</h2>";
    headers.add("Set-Cookie", "username=stark");
    // 返回响应实体类
    return new ResponseEntity<>(body, headers, HttpStatus.OK);
}
复制代码

重新启动应用,浏览器输入/hallo,页面显示了SUCCESS

d4b6e288c0cf45dea946b6ff80a8489a_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

自定义的cookie响应码等生效。

ResponseEntity还可以应用到文件下载中,AnotherController方法中新增方法download

@RequestMapping("/download")
public ResponseEntity<byte[]> download(HttpServletRequest request) throws IOException {
    // 1.得到要下载的流
    // 找到要下载文件的真实路径
    ServletContext context = request.getServletContext();
    String realPath = context.getRealPath("/js/jquery-1.9.1.min.js");
    FileInputStream is = new FileInputStream(realPath);
    byte[] tmp = new byte[is.available()];
    is.read(tmp);
    is.close();
    // 2.将要下载的文件返回
    HttpHeaders header = new HttpHeaders();
    header.set("Content-Disposition","attachment;filename="+"jquery-1.9.1.min.js");
    ResponseEntity<byte[]> responseEntity = new ResponseEntity<>(tmp, header, HttpStatus.OK);
    return responseEntity;
}
复制代码

重启tomcat,浏览器输入http://localhost:8080/download, 会自动下载指定的文件

二、文件上传

Spring MVC 为文件上传提供了直接的支持,这种支持是通过即插即用的MultipartResolver实现的,Spring是用Jakarta Commons FileUpload技术实现了一个MultipartResolver的实现类CommonsMultipartResolver

文件上传需要导入commons-fileupload和commons-io两个包,在pom文件中添加依赖

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.11.0</version>
</dependency>
复制代码

将导入的包放入 lib 文件夹下

7aecd365c49a4d5aac82748bc56026ad_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

在index.jsp同级目录下新建一个upload.jsp页面,新建文件上传表单

<h2>文件上传表单</h2>
<div>
  <form action="/upload" method="post" enctype="multipart/form-data">
    用户头像:<input type="file" name="headimg" />
    用户名:<input type="text" name="username" />
    <input type="submit">
  </form>
</div>
复制代码

文件上传表单一定要设置enctype属性且value为multipart/form-data,将请求体中的文件分段发送到服务器端

Spring MVC文件上传需要在Spring MVC配置文件上配置上传解析器CommonsMultpartResolver,否则无法解析文件上传请求,会出现http 400的报错

<!--配置文件上传解析器-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="#{1024*1024*20}" />
    <property name="defaultEncoding" value="utf-8" />
</bean>
复制代码
  • defaultEncoding:必须和用户的JSP的pageEncoding属性一致,以便正确解析表单内容
  • maxUploadSize:设置文件上传的大小,可以根据上传文件适当设置

新增一个UploadController,用于处理文件上传

@Controller
public class UploadController {
    @RequestMapping("/upload")
    public String upload(@RequestParam(value = "username", required = false) String username,
                         @RequestParam("headimg")MultipartFile file,
                         Model model){
        System.out.println("上传文件表单中文件属性的名称:" + file.getName());
        System.out.println("上传文件请求中文件的名称:" + file.getOriginalFilename());
        System.out.println("上传文件请求中username的值为:" + username);
        // 上传文件
        try {
            file.transferTo(new File("/Users/jingnan/Practice/spring-mvc-ajax/" + file.getOriginalFilename()));
            model.addAttribute("msg", "文件上传成功");
        } catch (IOException e) {
            model.addAttribute("msg","文件上传失败" + e.getMessage());
        }
        return "forward:/upload.jsp";
    }
}
复制代码

使用Spring MVC进行上传文件非常方便,调用transferTo方法即可完成上传文件的操作

在upload.jsp文件中显示文件上传是否成功的提示

<h2>文件上传表单</h2>
${msg}
<div>
    <!--文件上传表单保持不变-->
</div>
复制代码

重新启动应用,浏览器输入http://localhost:8080/upload.jsp, 进入文件上传界面并输入文件上传的表单内容

98b62891b899422aaf8aaedff0890118_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

点击提交按钮

31466b328262475ba476dcf73d6b283f_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

页面显示出文件上传成功的消息提示

3bad0b650e38437186c0b8a75979562e_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

并且控制台打印出了文件上传表单的内容以及表单属性信息

多文件上传

修改上传文件表单

<h2>文件上传表单</h2>
${msg}
<div>
    <form action="/uploads" method="post" enctype="multipart/form-data">
        图片:<input type="file" name="headimg" /> <br>
        图片1:<input type="file" name="headimg" /> <br>
        图片2:<input type="file" name="headimg" /> <br>
        图片3:<input type="file" name="headimg" /> <br>
        图片4:<input type="file" name="headimg" /> <br>
        用户名:<input type="text" name="username" />
        <input type="submit">
    </form>
</div>
复制代码

在UploadController中新增一个方法uploads,处理多文件上传 参数中通过Mulpart数组来接收前端的多文件

@RequestMapping("/uploads")
public String uploads(@RequestParam(value = "username", required = false) String username,
                     @RequestParam("headimg")MultipartFile[] files,
                     Model model){
    for (MultipartFile file : files) {
        System.out.println("上传文件表单中文件属性的名称:" + file.getName());
        System.out.println("上传文件请求中文件的名称:" + file.getOriginalFilename());
        // 保存文件
        try {
            file.transferTo(new File("/Users/jingnan/Practice/spring-mvc-ajax/" + file.getOriginalFilename()));
            model.addAttribute("msg", "文件上传成功");
        } catch (IOException e) {
            model.addAttribute("msg","文件上传失败" + e.getMessage());
        }
    }
    System.out.println("上传文件请求中username的值为:" + username);
    return "forward:/upload.jsp";
}
复制代码

重新启动应用,浏览器打开upload.jsp页面

eafb328f275a487e995e30cdefbae16b_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

表单中输入内容,并点击提交

da14929c5aaa461e8f104520db16da03_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

页面提示文件上传成功

87fa4782fa454c5b822a4a2585a104e9_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

后端控制台中也打印出了上传文件的信息


相关文章
|
27天前
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目,定义`Book`实体类、`BookRepository`接口和`BookService`服务类,最后实现`BookController`控制器来处理HTTP请求,展示了从基础环境搭建到API测试的完整过程。
38 4
|
7天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
18 1
|
1月前
|
前端开发 JavaScript API
惊呆了!学会AJAX与Fetch API,你的Python Web项目瞬间高大上!
在Web开发领域,AJAX与Fetch API是提升交互体验的关键技术。AJAX(Asynchronous JavaScript and XML)作为异步通信的先驱,通过XMLHttpRequest对象实现了局部页面更新,提升了应用流畅度。Fetch API则以更现代、简洁的方式处理HTTP请求,基于Promises提供了丰富的功能。当与Python Web框架(如Django、Flask)结合时,这两者能显著增强应用的响应速度和用户体验,使项目更加高效、高大上。
48 2
|
1月前
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
40 3
|
1月前
|
前端开发 API 数据格式
颠覆传统!AJAX、Fetch API与Python后端,开启Web开发新篇章!
在Web开发领域,技术的快速迭代推动着应用不断进化。传统前后端交互方式已无法满足现代Web应用对高效、实时性和用户体验的需求。AJAX作为异步通信的先驱,使页面无需刷新即可更新部分内容,显著提升用户体验;尽管XML曾是其主要数据格式,但如今JSON已成为主流。Fetch API则以其简洁、灵活的特点成为AJAX的现代替代品,基于Promises的异步请求让开发更加高效。与此同时,Python后端凭借高效稳定和丰富的库支持,成为众多开发者的首选,无论是轻量级的Flask还是全功能的Django,都能为Web应用提供强大的支撑。
36 0
|
1月前
|
XML 前端开发 API
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
26 0
|
2月前
|
前端开发 安全 Java
技术进阶:使用Spring MVC构建适应未来的响应式Web应用
【9月更文挑战第2天】随着移动设备的普及,响应式设计至关重要。Spring MVC作为强大的Java Web框架,助力开发者创建适应多屏的应用。本文推荐使用Thymeleaf整合视图,通过简洁的HTML代码提高前端灵活性;采用`@ResponseBody`与`Callable`实现异步处理,优化应用响应速度;运用`@ControllerAdvice`统一异常管理,保持代码整洁;借助Jackson简化JSON处理;利用Spring Security增强安全性;并强调测试的重要性。遵循这些实践,将大幅提升开发效率和应用质量。
63 7
|
2月前
|
前端开发 测试技术 开发者
MVC模式在现代Web开发中有哪些优势和局限性?
MVC模式在现代Web开发中有哪些优势和局限性?
|
3月前
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
67 3
|
3月前
|
Java API 数据库
【神操作!】Spring Boot打造RESTful API:从零到英雄,只需这几步,让你的Web应用瞬间飞起来!
【8月更文挑战第12天】构建RESTful API是现代Web开发的关键技术之一。Spring Boot因其实现简便且功能强大而深受开发者喜爱。本文以在线图书管理系统为例,展示了如何利用Spring Boot快速构建RESTful API。从项目初始化、实体定义到业务逻辑处理和服务接口实现,一步步引导读者完成API的搭建。通过集成JPA进行数据库操作,以及使用控制器类暴露HTTP端点,最终实现了书籍信息的增删查改功能。此过程不仅高效直观,而且易于维护和扩展。
55 1