SpringMVC和Ajax的交互詳解(手工處理)
更新時間：2022年08月02日 09:25:39 作者：程序員小王java
Ajax即異步的?JavaScript和XML,是一種無需重新加載整個網(wǎng)頁的情況下,能夠更新部分模塊的網(wǎng)頁技術(shù),下面這篇文章主要給大家介紹了關(guān)于SpringMVC和Ajax交互的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
SpringMVC與Ajax的交互
一、ajax的實現(xiàn)
ajax異步請求 javaScript and xml 異步請求
1、同步請求和異步請求
1、異步請求 特點：請求響應(yīng)回來頁面不動 只刷新頁面局部
2、同步請求 特點：響應(yīng)回來全部刷新(地址欄，超鏈接，表單 js的location.href="")
3、通過Ajax發(fā)送的請求都是異步請求 多請求之間并行處理 請求之間不會相互影響
2、Ajax實現(xiàn)異步請求
Ajax發(fā)送請求 通過js的異步請求對象發(fā)送請求 xhr XMLHttpRequest
js實現(xiàn)ajax:
1、創(chuàng)建異步請求對象 xhr
2、準備并且發(fā)送請求xhr.open() xhr.send();
3、處理響應(yīng)
xhr.onreadyStateChang=dunction(){
if(xhr.readyState==4&&xhr.status==200{
xhr.responseText
}
}
4、ajax只認字符串
jquery實現(xiàn)Ajax的封裝
$.ajax({}) 基礎(chǔ)發(fā)送Ajax請求的方式
$.get(url,method,function(){})//get方式發(fā)送請求
$.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相關(guān)的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 () {
//發(fā)送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以手工轉(zhuǎn)化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用戶集合轉(zhuǎn)化為json形式字符串
String jsonUsers = JSONObject.toJSONStringWithDateFormat(users, "yyyy-mm-dd");
//2、通過響應(yīng)輸出流，響應(yīng)到客戶端
//設(shè)置響應(yīng)格式
response.setCharacterEncoding("utf-8");
response.getWriter().print(jsonUsers);
return null;
}
}
（5）響應(yīng)到前端中文亂碼 Ajax前端頁面響應(yīng)中文亂碼
響應(yīng)之前先設(shè)置響應(yīng)格式：
//設(shè)置響應(yīng)格式
response.setCharacterEncoding("utf-8");
解決亂碼問題后
三、SpringMVC和AJAX交互（@responseBody注解實現(xiàn)）
1、SpringMVC提供注解：@responseBody
@responseBody:簡化返回的數(shù)據(jù)轉(zhuǎn)化成json串并且通過response響應(yīng)的回客戶端過程
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轉(zhuǎn)化工具 不是fastjson,用的是jackjson
<!--jackson相關(guān)依賴 Springmvc@responsBody注解使用jackSon-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.11.3</version>
</dependency>
（2）@responsBody可以放在返回值前面
（3）設(shè)置當前方式的日期轉(zhuǎn)化格式需要使用注解
//jackson SpringMVC內(nèi)置的 @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")
設(shè)置后結(jié)果：
4、@ResponseBody案例：通過動態(tài)獲取id查詢用戶并在頁面顯示結(jié)果
（1）前端頁面動態(tài)獲取id，通過Ajax實現(xiàn)異步傳輸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);
// 創(chuàng)建ul標簽
var ul = $("<ul></ul>");
// 創(chuàng)建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）效果展示圖
總結(jié)
到此這篇關(guān)于SpringMVC和Ajax交互的文章就介紹到這了,更多相關(guān)SpringMVC和Ajax交互內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Spring?Boot實現(xiàn)WebSocket實時通信
本文主要介紹了Spring?Boot實現(xiàn)WebSocket實時通信,包含實現(xiàn)實時消息傳遞和群發(fā)消息等功能,具有一定的參考價值,感興趣的可以了解一下2024-05-05
Spring Security和Shiro的相同點與不同點整理
在本篇文章里小編給大家整理的是關(guān)于Spring Security和Shiro的相同不同點整理，需要的朋友們可以參考下。2020-02-02
springboot實現(xiàn)maven多模塊和打包部署
本文主要介紹了springboot實現(xiàn)maven多模塊和打包部署，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
MyBatis使用嵌套查詢collection和association的實現(xiàn)
本文詳細介紹了使用MyBatis框架進行數(shù)據(jù)庫操作時,如何利用collection標簽實現(xiàn)一對多的嵌套查詢和使用association標簽實現(xiàn)一對一的嵌套查詢,感興趣的可以了解一下2024-09-09
Springmvc RequestMapping請求實現(xiàn)方法解析
這篇文章主要介紹了Springmvc RequestMapping請求實現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
用IDEA創(chuàng)建SpringBoot項目的詳細步驟記錄
Idea有著非常簡便的Spring Boot新建過程,同時依靠pom自動下載依賴,下面這篇文章主要給大家介紹了關(guān)于用IDEA創(chuàng)建SpringBoot項目的詳細步驟,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-08-08
SpringBoot整合Spring Security構(gòu)建安全的Web應(yīng)用
pring Security是一個強大的身份驗證和訪問控制框架,本文主要介紹了SpringBoot整合Spring Security構(gòu)建安全的Web應(yīng)用,具有一定的參考價值,感興趣的可以了解一下2024-01-01
Java中for、foreach、stream區(qū)別和性能比較詳解
for、foreach、stream都可以循環(huán)處理數(shù)據(jù),如果單純當循環(huán)使用,for、foreach、stream哪個性能更好,這篇文章主要給大家介紹了關(guān)于Java中for、foreach、stream區(qū)別和性能的相關(guān)資料,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了在Java中如何實現(xiàn)文件夾、文件目錄的遞歸下載并打包成ZIP壓縮包,文中的示例代碼講解詳細,有需要的可以參考下2024-10-10
使用?Spring?Boot?Admin?監(jiān)控應(yīng)用狀態(tài)的詳細過程
這篇文章主要介紹了使用?Spring?Boot?Admin?監(jiān)控應(yīng)用狀態(tài),該模塊采集應(yīng)用的內(nèi)部信息，并暴露給外部的模塊，支持?HTTP?和?JMX，并可以與一些第三方監(jiān)控系統(tǒng)（如?Prometheus）整合，需要的朋友可以參考下2022-09-09