高级应用
一.ajax
Ajax 是一种异步无刷新技术
-
jquery 实现 ajax回忆
test.json
[ { "name": "zhangsan", "age": 13 }, { "name": "lisi", "age": 14 }, { "name": "wangwu", "age": 15 } ]
html
<body> <button id="btn">点击</button> <ul id="ul"></ul> </body> <script src="../js/jquery-3.5.1.min.js"></script> <script> $("#btn").click(function () { $.ajax({ type:"get", url:"../js/test.json", data:{}, dataType:"json", success:function (data) { console.log(data) for (let i = 0; i < data.length; i++) { var li = "<li>"+data[i].name+"</li>" $("#ul").append(li); } } }) }) </script> </html>
-
Springmvc 配合 jquery 使用 ajax 传递一个参数
index.jsp
<a href="My/login">去 登录</a>
login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> 用户名 :<input type="text" name="name" id="name"> <span style="color: red" id="tip"></span> </body> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script> $("#name").blur(function () { var name = $(this).val() $.ajax({ url:"http://localhost:8080/springmvc10_war_exploded/My/loginCheck?uname="+name, success:function (data) { // alert(data) $("#tip").text(data); } }) }) </script> </html>
Controller
@Controller @RequestMapping("My") public class MyController { @RequestMapping("login") public String login(){ return "login"; } @RequestMapping("loginCheck") @ResponseBody public String loginCheck(String uname){ if("zhangsan".equals(uname)){ return "exist"; }else{ return "not exist"; } } }
3.Springmvc 配合 jquery 使用 ajax 传递多个参数
导入jar包
jackson-databind:在maven中导入jackson-databind的jar包(会自带导入jackson-databind/jackson-annotations/jack-core)
gson:导入gson的jar包
开通注解配置 <mvc:annotation-driven />
-
第一种方式:用springmvc支持的jar包,让前端控制器帮你转为json字符串
jsp页面
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script $("#btn").click(function (){ $.ajax({ url:"http://localhost:8080/springmvc10_war_exploded/My/getData", dataType:"json", success:function (data) { console.log(data) } }) }) </script>
Controller
@ResponseBody @RequestMapping("getData") public List<User> getData(){ ArrayList<User> users = new ArrayList<>(); users.add(new User("张三",33)); users.add(new User("李四",44)); return users; // 直接返回一个 集合 }
-
第二种方式:自己手动转化
导入jar包 fastjson
jsp页面
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script $("#btn").click(function (){ $.ajax({ url:"http://localhost:8080/springmvc10_war_exploded/My/getData1", dataType:"json", success:function (data) { console.log(data) } }) }) </script>
Controller
@ResponseBody @RequestMapping("getData1") public String getData1(){ ArrayList<User> users = new ArrayList<>(); users.add(new User("张三",33)); users.add(new User("李四",44)); return JSON.toJSONString(users); // 手动转换 并返回 }
二.中文乱码问题
-
解决大部分乱码问题
在web.xml中间进行配置 放在 前端控制器之前
<!-- 前端过滤器 转换乱码 --> <filter> <filter-name>CharacterEncodingFilter</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>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
-
ajax 若发送get请求乱码
在 Controller 中的方法上配置 produces 进行说明
@RequestMapping(value = "getData1",produces = "text/html;charset=UTF-8")
-
ajax 若发送post请求乱码
配置 tomcat 服务器 在 server.xml 中 配置 URIEncoding=“utf-8”
<Connector URIEncoding="utf-8" connectionTimeout="20000" port="8080" protocol="org.apache.coyote.http11.Http11NioProtocol" redirectPort="8443" useBodyEncodingForURI="true"/>
三.上传文件
Spring MVC 为文件上传提供了直接支持,这种支持是通过即插即用的
MultipartResolver实现.Spring使用jakarta Commons FileUpload技术实现一个MutipartResovler实现类:CommonsMultipartResolver。
在Spring上下文中默认没有装配MultipartResolver,因此默认情况是无法处理文件上传工作的。如果想使用Spring的文件上传功能,在需要现在上线文中进行配置
-
引入 jar 包
commons-fileupload.jar
commons-io.jar
-
配置MultipartResolver
multipartResolver 配置 Id 必须为multipartResolver
MultipartResolver 用于处理上传文件,当收到请求时 DispatcherServler的checkMultipart()方法会调用MultipartResolver的isMultipart() 方法进行判断是否包含文件。如果请求数据中包含文件,则调用MultipartResolver的 resolverMultipartResovler进行方法的解析,然后将文件数据解析成MultipartFile并封装在MultipartHttpServlerRequest中(继承了HttpServlertRequest)对象中,最后传递给 Controller
<!-- 配置MultipartResolver --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="UTF-8" /> <property name="maxUploadSize" value="5242880" /> <property name="uploadTempDir" value="static/temp"/> <property name="resolveLazily" value="true"/> </bean>
-
编写 Controller
@RequestMapping("fileload") public String fileload(@RequestParam("myfile") MultipartFile myflie) throws IOException { String name = myflie.getOriginalFilename(); // 获取文件名字 System.out.println(myflie); // 打印了文件名 说明上传成功 但是临时存储 myflie.transferTo(new File("static/temp/"+name)); return "success"; }
四.获取当前项目名称
@Controller
@RequestMapping("My")
public class MyController {
@RequestMapping("fileload")
public String fileload(@RequestParam("myfile") MultipartFile myflie, HttpServletRequest request) throws IOException {
String name = myflie.getOriginalFilename(); // 获取文件名字
String realPath = request.getSession().getServletContext().getRealPath("static/file");// 获取当前项目名 file一定是target下已有的目录哦
System.out.println(realPath);
myflie.transferTo(new File(realPath+"/"+name));
return "success";
}