SpringMVC和Ajax的交互详解(手工处理)
更新时间：2022年08月02日 09:25:39 作者：程序员小王java
Ajax即异步的 JavaScript和XML,是一种无需重新加载整个网页的情况下,能够更新部分模块的网页技术,下面这篇文章主要给大家介绍了关于SpringMVC和Ajax交互的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
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
<!--引入阿里巴巴json解析器fastjson-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.73</version>
</dependency>
1、案例：使用Ajax形式查询所有用户
（1）交互示意图
（2）ajax页面
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<%--引入js相关的jquery页面--%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
//获取单击按钮对象，绑定单击事件
$("#btn").click(function () {
//发送get形式的Ajax异步请求
$.get("${pageContext.request.contextPath}/user/show", function (result) {
console.log(result)
}, "json");
})
});
</script>
</head>
<body>
<input type="button" value="点击查询所有" id="btn">
</body>
</html>
（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<User> 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前端页面响应中文乱码
响应之前先设置响应格式：
//设置响应格式
response.setCharacterEncoding("utf-8");
解决乱码问题后
三、SpringMVC和AJAX交互（@responseBody注解实现）
1、SpringMVC提供注解：@responseBody
@responseBody:简化返回的数据转化成json串并且通过response响应的回客户端过程
2、使用@ResponseBody替代手工处理（使用Ajax形式查询所有用户）
@Controller
@RequestMapping("user")
public class QueryUser {
@RequestMapping("show")
@ResponseBody
public List<User> 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<User> users = Arrays.asList(user1, user2, user3, user4, user5);
return users;
}
}
@ResponseBody替代示意图
3、@responsBody注意事项
（1）@responsBody注解 使用的json转化工具 不是fastjson,用的是jackjson
<!--jackson相关依赖 Springmvc@responsBody注解使用jackSon-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.11.3</version>
</dependency>
（2）@responsBody可以放在返回值前面
（3）设置当前方式的日期转化格式需要使用注解
//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")
设置后结果：
4、@ResponseBody案例：通过动态获取id查询用户并在页面显示结果
（1）前端页面动态获取id，通过Ajax实现异步传输id值到Controller层
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
<script>
$(function () {
$("#del").click(function () {
$.get("${pageContext.request.contextPath}/user/showById?id=" + $("input[name='id']").val(), function (result) {
console.log(result);
// 创建ul标签
var ul = $("<ul></ul>");
// 创建li当前获取到的值
var idLi = $("<li>" + result.id + "</li>");
var usernameLi = $("<li>" + result.username + "</li>");
var passwordLi = $("<li>" + result.password + "</li>");
var salaryLi = $("<li>" + result.salary + "</li>");
var birthdayLi = $("<li>" + result.birthday + "</li>");
// 将li子标签添加到ul上
ul.append(idLi);
ul.append(usernameLi);
ul.append(passwordLi);
ul.append(salaryLi);
ul.append(birthdayLi);
$("#body").append(ul)
}, "json");
})
})
</script>
</head>
<body id="body">
ID：<input type="text" name="id" placeholder="请输入用户的ID">
<input type="button" name="id" value="提交" id="del">
</body>
</html>（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<User> users = Arrays.asList(user1, user2, user3, user4, user5);
for (User user : users) {
if(id.equals(user.getId())){
return user;
}
}
return null;
}
（3）效果展示图
总结
到此这篇关于SpringMVC和Ajax交互的文章就介绍到这了,更多相关SpringMVC和Ajax交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Java对象转换的方案分享，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-09-09
Filter过滤器是javaWeb层面的,它跟Servlet类似,每次前端请求,首先进入的是过滤器,我们必须实现Filter接口,重写三个方法,才能使用Filter过滤器,需要的朋友可以参考下2021-06-06
MinIO 是一个基于Apache License v2.0开源协议的对象存储服务,它兼容亚马逊S3云存储服务接口,非常适合于存储大容量非结构化的数据,本文给大家介绍了springboot整合minio实现文件存储功能,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-12-12
Jsoup是一款Java语言开发的HTML解析器，用于解析HTML文档以及对HTML文档进行操作，处理等，本文就将详细给大家介绍一下Java中的爬虫利器Jsoup，感兴趣的同学可以参考一下2023-06-06
Spring Aop之AspectJ注解配置实现日志管理的方法
下面小编就为大家分享一篇Spring Aop之AspectJ注解配置实现日志管理的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
Java是一门面向对象的语言。对象是Java程序中的基本实体。除了对象之外Java程序同样处理基本数据。下面这篇文章主要给大家总结了关于Java中面向对象的知识点，需要的朋友可以参考借鉴，下面来一起看看吧。2017-02-02
这篇文章主要介绍了idea在运行期间,实现让修改的页面实时生效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要为大家详细介绍了java设计模式之外观模式学习笔记,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
spring配置文件中util:properties和context:property-placeholder用法
这篇文章主要介绍了spring配置文件中util:properties和context:property-placeholder用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了简单了解Spring中的事务控制，事务是一组操作的执行单元，下面我们来简单学习一下吧2019-05-05
最新评论