根据B站视频整理:https://www.bilibili.com/video/BV1Mt411G7A8?p=1
(1)webapp下建一个response.jsp界面,写上链接
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <a href="user/testString">testString</a> </body> </html>(2)在webapp下的WEB-INF包,建一个success.jsp。
跳转到这个界面后,展示获取响应结果。
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <html> <head> <title>Title</title> </head> <body> <h3>执行成功</h3> ${user.uname} ${user.password} </body> </html>(3)创建UserController类,写testString方法测试。
@Controller @RequestMapping("/user") public class UserController { @RequestMapping("/testString") public String testString(Model model){ System.out.println("执行了testString"); //模拟从数据库中查询User对象。 User user = new User(); user.setUname("美美"); user.setPassword("22"); user.setAge(30); model.addAttribute("user",user); return "success"; } }(4)测试结果
(1)在success.jsp中添加链接
<a href="user/testVoid">testVoid</a>(2)在UserController类中添加测试方法
@RequestMapping("/testVoid") public void testVoid( ){ System.out.println("testVoid"); }(3)结果图
浏览器截图
控制台截图
控制台截图的输出,说明这个方法执行了。 可以在pages下建立uses包,然后建一个testVoid.jsp解决。
或者像下边这样,转发请求。
直接发请求,是不能直接访问WEB-INF下的文件。
//请求转发一次请求,不用编写项目的名称 @RequestMapping("/testVoid") public void testVoid(HttpServletRequest request, HttpServletResponse response) throws Exception{ System.out.println("testVoid"); //编写请求转发的程序 //转发的要写全路径,因为不会走视图解析器 request.getRequestDispatcher("/WEB-INF/pages/success.jsp").forward(request,response); }转发和重定向用不了视图解析器
(1)在success.jsp中添加
<a href="user/testForwardOrRedirect">testForwardOrRedirect</a> <br>(2)在UserController类中添加测试方法
@RequestMapping("/testForwardOrRedirect") public String testForwardOrRedirect(){ System.out.println("执行了testForwardOrRedirect"); //请求转发 //return "forward:/WEB-INF/pages/success.jsp"; //重定向.不加项目的名称,底层帮我们加过了 return "redirect:/index.jsp"; }(1)在webapp下建一个js包,把js文件放进去。然后在jsp界面中的head标签中添加引用js(这里没有jquery.min.js文件)
<script src="js/jquery.min.js"></script>(2)在jsp的body中写一个but按钮
<button id="btn"> 发送ajax请求 </button>(3)还在jsp的head标签中添加
<srcipt> //页面加载,绑定单击事件 $(function(){ $("#btn").click(function(){ alert("hello btn"); }); }); </srcipt>点击按钮后,没反应。因为拦截器会把静态资源给拦截了。需要配置告诉前端控制器不让它拦截静态资源。
在springmvc.xml中添加下边的就可以了。
<!--告诉前端控制器,哪些静态资源不拦截--> <mvc:resource mapping="/css/**" localtion="/css/**"></mvc:resource> <mvc:resource mapping="/images/**" localtion="/images/**"></mvc:resource> <mvc:resource mapping="/js/**" localtion="/js/**"></mvc:resource>(1)在response.jsp的head标签中添加
<srcipt> //页面加载,绑定单击事件 $(function(){ $("#btn").click(function(){ //发送ajax请求 $.ajax({ //编写json格式,设置属性和值 url:"user/testAjax", contentType:"application/json;charset=UTF-8", data:'{"username":"hehe","password":"123","age":30}', dataType:"json", type:"post", success:function(data){ //data服务器端响应的json的数据,进行解析 } }); }); }); </srcipt>(2)在UserController类中添加方法
@RequestMapping("/testAjax") public void testAjax(@RequestBody String body){ System.out.println("testAjax"); System.out.println(body); }(1)先在pom文件中,导入坐标依赖
<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.10.0</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.10.0</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.10.0</version> </dependency>(2)在UserController类中添加方法
//User前的注解ResponseBody,是把user转换成json @RequestMapping("/testAjax") public @ResponseBody User testAjax(@RequestBody User user){ System.out.println("testAjax"); //客户端发送ajax的请求,传的是json字符串,后端把json字符串封装到user对象中 System.out.println(user); //做响应,模拟查询数据库 user.setUname("hhh"); user.setAge(22); //作响应 return user; }(1)form表单的enctype取值必须是:multipart/form-data
默认值是application/x-www-form-urlencoded
enctype:是表单请求正文的类型
(2)method属性取值必须是Post
(3)提供一个文件选择域
<input type="file" />(1)导入文件上传的jar包
<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.6</version> </dependency>(2)编写上传文件的jsp页面
<h3>传统文件上传</h3> <form action="/user/fileupload1" method="post" enctype="multipart/form-data"> 选择文件<input type="file" name="upload" /> <br> <input type="submit" value="上传"/> </form>(3)在UserController类中添加方法
//文件上传 @RequestMapping("/fileupload1") public String fileupload1(HttpServletRequest request) throws Exception{ System.out.println("文件上传。。。"); //使用fileupload组件完成文件上传 //上传的位置 String path = request.getSession().getServletContext().getRealPath("/uploads/"); //判断。该路径是否存在 File file = new File(path); if (!file.exists()){ //创建文件夹 file.mkdirs(); } //解析request对象,获取上传文件项 DiskFileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); //解析request List<FileItem> items = upload.parseRequest(request); //遍历 for(FileItem item: items){ //进行判断,当前item对象是否是上传文件项 if(item.isFormField()){ //说明普通表单 }else{ //说明上传文件项 //获取上传文件的名称 String filename = item.getName(); //把文件的名称设置唯一值,uuid String uuid = UUID.randomUUID().toString().replace("-",""); filename = uuid + "_" + filename; //完成文件上传 item.write(new File(path,filename)); //删除临时文件 item.delete(); } } return "success"; }上传的位置在tomcat文件夹下webapps的项目根目录下。
(1)编写上传文件的jsp页面
<h3>springmvc文件上传</h3> <form action="user/fileupload2" method="post" enctype="multipart/form-data"> 选择文件<input type="file" name="upload" /> <br> <input type="submit" value="上传"/> </form>(2)springmvc配置文件中添加解析器
<!--配置文件解析器对象--> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="10485760"></property> </bean>(3)在UserController类中添加方法
//springmvc文件上传 @RequestMapping("/fileupload2") //参数 MultipartFile upload 必须和表单一样 public String fileupload2(HttpServletRequest request, MultipartFile upload) throws Exception{ System.out.println("文件上传。。。"); //使用fileupload组件完成文件上传 //上传的位置 String path = request.getSession().getServletContext().getRealPath("/uploads/"); //判断。该路径是否存在 File file = new File(path); if (!file.exists()){ //创建文件夹 file.mkdirs(); } //说明上传文件项 //获取上传文件的名称 String filename = upload.getOriginalFilename(); //把文件的名称设置唯一值,uuid String uuid = UUID.randomUUID().toString().replace("-",""); filename = uuid + "_" + filename; //完成文件上传 upload.transferTo(new File(path,filename)); return "success"; }在实际开发中,可能会有很多处理不同功能的服务器。例如:
应用服务器:负责部署我们的应用。
数据库服务器:负责运行我们的数据库。
文件服务器:负责存储用户上传文件的服务器。
缓存和消息服务器:负责处理大并发访问的缓存和消息。
(1)导入文件上传的jar包
<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.6</version> </dependency> <dependency> <groupId>com.sun.jersey</groupId> <artifactId>jersey-core</artifactId> <version>1.19.4</version> </dependency> <dependency> <groupId>com.sun.jersey</groupId> <artifactId>jersey-client</artifactId> <version>1.19.4</version> </dependency>(2)编写上传文件的jsp页面
<h3>跨服务器文件上传</h3> <form action="user/fileupload3" method="post" enctype="multipart/form-data"> 选择文件<input type="file" name="upload" /> <br> <input type="submit" value="上传"/> </form>(3)在UserController类中添加方法
要上传的服务器要有uploads文件夹,下边代码中没有创建,否则会报错,说找不到那个文件夹。
//跨服务器文件上传 @RequestMapping("/fileupload3") //参数 MultipartFile upload 必须和表单一样 public String fileupload3(MultipartFile upload) throws Exception{ System.out.println("文件上传。。。"); //定义上传文件服务器路径 String path = "http://localhost:9090/uploads/"; //获取上传文件的名称 String filename = upload.getOriginalFilename(); //把文件的名称设置唯一值,uuid String uuid = UUID.randomUUID().toString().replace("-",""); filename = uuid + "_" + filename; //完成文件上传,跨服务器 //1、创建客户端对象 Client client = Client.create(); //2、和图片服务器连接 //因为path路径最后有 '/' ,所以可以直接写 '+filename' WebResource webResource = client.resource(path+filename); //3、上传文件 webResource.put(upload.getBytes()); return "success"; }