SpringMVC与Ajax的交互
一、ajax的实现
ajax异步请求 javaScript and xml 异步请求
1、同步请求和异步请求
1、异步请求 特点:请求响应回来页面不动 只刷新页面局部
2、同步请求 特点:响应回来全部刷新(地址栏,超链接,表单 js的location.href="")
3、通过Ajax发送的请求都是异步请求 多请求之间并行处理 请求之间不会相互影响
2、Ajax实现异步请求
Ajax发送请求 通过js的异步请求对象发送请求 xhr XMLHttpRequest
js实现ajax:
1、创建异步请求对象 xhr
2、准备并且发送请求xhr.open() xhr.send();
3、处理响应
xhr.onreadyStateChang=dunction(){
if(xhr.readyState==4&&xhr.status==200{
xhr.responseText
}
}
4、ajax只认字符串
jquery实现Ajax的封装
$.ajax({}) 基础发送Ajax请求的方式
$.get(url,method,function(){})//get方式发送请求
$.post(url,method,function{},"json")
二、SpringMVC和AJAX交互(手工处理)
控制器使用的json解析工具:阿里巴巴的fastjson
com.alibaba
fastjson
1.2.73
1、案例:使用Ajax形式查询所有用户
(1)交互示意图
![](https://img-blog.csdnimg.cn/img_convert/4c8cd892e3a76ec9dc14fdf73e03ddf4.png)
(2)ajax页面
$(function () {
//获取单击按钮对象,绑定单击事件
$("#btn").click(function () {
//发送get形式的Ajax异步请求
$.get("${pageContext.request.contextPath}/user/show", function (result) {
console.log(result)
}, "json");
})
});
(3)实体类
public class User {
private Integer id;
private String Username;
private String password;
private Double salary;
private Date birthday;
(4)Controller以手工转化json
@Controller
@RequestMapping("user")
public class QueryUser {
@RequestMapping("show")
public String showUser(HttpServletResponse response) throws IOException {
User user1 = new User(1,"王恒杰1","123",2000d,new Date());
User user2 = new User(2,"王恒杰2","123",20000d,new Date());
User user3 = new User(3,"王恒杰3","123",200000d,new Date());
User user4 = new User(4,"王恒杰4","123",2000000d,new Date());
User user5 = new User(5,"王恒杰5","123",20000000d,new Date());
List users = Arrays.asList(user1, user2, user3, user4, user5);
//1、将users用户集合转化为json形式字符串
String jsonUsers = JSONObject.toJSONStringWithDateFormat(users, "yyyy-mm-dd");
//2、通过响应输出流,响应到客户端
//设置响应格式
response.setCharacterEncoding("utf-8");
response.getWriter().print(jsonUsers);
return null;
}
}
(5)响应到前端中文乱码
Ajax前端页面响应中文乱码
![](https://img-blog.csdnimg.cn/img_convert/37bbc7c9cb614bd672e0a96724871cec.png)
响应之前先设置响应格式:
//设置响应格式
response.setCharacterEncoding("utf-8");
![](https://img-blog.csdnimg.cn/img_convert/99aec17d78d73ebac9235716c598fcb8.png)
解决乱码问题后
![](https://img-blog.csdnimg.cn/img_convert/601102d3ce8806e4c4a5e0d40928e350.png)
三、SpringMVC和AJAX交互(@responseBody注解实现)
1、SpringMVC提供注解:@responseBody
@responseBody:简化返回的数据转化成json串并且通过response响应的回客户端过程
![](https://img-blog.csdnimg.cn/img_convert/1234e742c408e5afae6d867e3bc4b611.png)
2、使用@ResponseBody替代手工处理(使用Ajax形式查询所有用户)
@Controller
@RequestMapping("user")
public class QueryUser {
@RequestMapping("show")
@ResponseBody
public List showUser(HttpServletResponse response) throws IOException {
User user1 = new User(1,"王恒杰1","123",2000d,new Date());
User user2 = new User(2,"王恒杰2","123",20000d,new Date());
User user3 = new User(3,"王恒杰3","123",200000d,new Date());
User user4 = new User(4,"王恒杰4","123",2000000d,new Date());
User user5 = new User(5,"王恒杰5","123",20000000d,new Date());
List users = Arrays.asList(user1, user2, user3, user4, user5);
return users;
}
}
@ResponseBody替代示意图
![](https://img-blog.csdnimg.cn/img_convert/761de505ba71de351266f3986619fc76.png)
3、@responsBody注意事项
(1)@responsBody注解 使用的json转化工具 不是fastjson,用的是jackjson
com.fasterxml.jackson.core
jackson-databind
2.11.3
(2)@responsBody可以放在返回值前面
![](https://img-blog.csdnimg.cn/img_convert/021863caa867c6a182e276e824993bd1.png)
(3)设置当前方式的日期转化格式需要使用注解
![](https://img-blog.csdnimg.cn/img_convert/336898e0d9f506aa3c18fd6a3667c806.png)
//jackson SpringMVC内置的
@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
//fastjson 阿里的
@JSONFiled(format="yyyy-mm-dd")
解决办法:在实体类的属性Date加入:@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
![](https://img-blog.csdnimg.cn/img_convert/6c842ec9f0cc9bbc9b31f975b017001e.png)
设置后结果:
![](https://img-blog.csdnimg.cn/img_convert/d29f158966ffce055e7ccb84801771e6.png)
4、@ResponseBody案例:通过动态获取id查询用户并在页面显示结果
(1)前端页面动态获取id,通过Ajax实现异步传输id值到Controller层
$(function () {
$("#del").click(function () {
$.get("${pageContext.request.contextPath}/user/showById?id=" + $("input[name='id']").val(), function (result) {
console.log(result);
// 创建ul标签
var ul = $("");
// 创建li当前获取到的值
var idLi = $("" + result.id + "");
var usernameLi = $("" + result.username + "");
var passwordLi = $("" + result.password + "");
var salaryLi = $("" + result.salary + "");
var birthdayLi = $("" + result.birthday + "");
// 将li子标签添加到ul上
ul.append(idLi);
ul.append(usernameLi);
ul.append(passwordLi);
ul.append(salaryLi);
ul.append(birthdayLi);
$("#body").append(ul)
}, "json");
})
})
ID:
(2)控制层java代码
@RequestMapping("showById")
public @ResponseBody User showUserById(HttpServletResponse response,Integer id) throws IOException {
User user1 = new User(1,"王恒杰1","123",2000d,new Date());
User user2 = new User(2,"王恒杰2","123",20000d,new Date());
User user3 = new User(3,"王恒杰3","123",200000d,new Date());
User user4 = new User(4,"王恒杰4","123",2000000d,new Date());
User user5 = new User(5,"王恒杰5","123",20000000d,new Date());
List users = Arrays.asList(user1, user2, user3, user4, user5);
for (User user : users) {
if(id.equals(user.getId())){
return user;
}
}
return null;
}
(3)效果展示图
![](https://img-blog.csdnimg.cn/img_convert/74cacd27ff434480bb677b52232c8774.png)
|