SpringMVC 通過ajax 前后端數(shù)據(jù)交互的實現(xiàn)方法
更新時間：2025年04月28日 11:33:35 作者：我是大頭鳥
這篇文章主要介紹了SpringMVC 通過ajax 前后端數(shù)據(jù)交互的實現(xiàn)方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
在前端的開發(fā)過程中，經(jīng)常在html頁面通過ajax進行前后端數(shù)據(jù)的交互，SpringMVC的controller進行數(shù)據(jù)的接收，但是有的時候后端會出現(xiàn)數(shù)據(jù)無法接收到的情況，這個是因為我們的參數(shù)和前端ajax的contentType參數(shù) 類型不對應(yīng)的情景，或者說contentType和后臺controller 方法參數(shù)到底存在什么樣的關(guān)系
普通的參數(shù)我們傳遞的時候往往是這樣的兩種情況：
contentType: "application/x-www-form-urlencoded",
contentType: "application/json",
這樣的兩種方式有什么樣的區(qū)別，
第一種方式：application/x-www-form-urlencoded 參數(shù)會解析為參數(shù)表，比如：
name=John+Doe&age=30&city=New+York
通過ajax 傳遞，ajax寫法如下：
let params={
"username":"張三",
"password":"123456",
}
$.ajax({
url: "dologin4",
contentType: "application/x-www-form-urlencoded",
headers: { 'Authorization': "****",'Access-Control-Allow-Origin':'*'},
type: 'post',
data: params,
success: function(result) {
console.log(result)
},
error: function(data) {
console.log('接口不通');
}
});這樣的形式，后臺接受的時候，使用：request.getParameter()或@RequestParam，比如：
@RequestMapping("/dologin")
public ModelAndView dologin(@RequestParam String username,@RequestParam String password) throws Exception {
System.out.println(username);
System.out.println(password);
ModelAndView mav = new ModelAndView();
mav.addObject("info", "歡迎你");
mav.setViewName("success");
return mav;
}
@ResponseBody
@RequestMapping("/dologin2")
public Map<String,Object> dologin2(HttpServletRequest request,HttpServletResponse response) throws Exception {
String username=request.getParameter("username");
System.out.println(username);
Map<String,Object> map=new HashMap<>();
map.put("aa", "1111");
return map;
}適合 x-www-form-urlencoded 的情況：
- 傳統(tǒng)HTML表單提交
- 簡單的鍵值對數(shù)據(jù)
- 需要向后兼容老系統(tǒng)
- 文件上傳（結(jié)合
multipart/form-data）
第二種方式：contentType: "application/json", 整個body作為單一數(shù)據(jù)流處理，比如：
{
"name": "John Doe",
"age": 30,
"city": "New York",
"hobbies": ["reading", "swimming"]
}通過ajax 傳遞，ajax寫法如下：
function dologin(){
let params={
"username":"張三",
"password":"123456",
}
$.ajax({
url: "dologin4",
contentType: "application/json",
headers: { 'Authorization': "****",'Access-Control-Allow-Origin':'*'},
type: 'post',
data: JSON.stringify(params),
success: function(result) {
console.log(result)
},
error: function(data) {
console.log('接口不通');
}
});
}Java后臺接受前臺傳入?yún)?shù)的代碼如下：@RequestBody
@ResponseBody
@RequestMapping("/dologin4")
public Map<String,Object> dologin4(HttpServletRequest request,HttpServletResponse response) throws Exception {
String uu=request.getParameter("username");
System.out.println(uu);
StringBuilder jsonBuilder = new StringBuilder();
try (BufferedReader reader = request.getReader()) {
String line;
while ((line = reader.readLine()) != null) {
jsonBuilder.append(line);
}
}
String jsonString = jsonBuilder.toString();
ObjectMapper mapper = new ObjectMapper();
Map<String, Object> jsonMap = mapper.readValue(jsonString, Map.class);
String username = (String) jsonMap.get("username");
System.out.println(username);
Map<String,Object> map=new HashMap<>();
map.put("aa", "1111");
return map;
}
@ResponseBody
@RequestMapping("/dologin3")
public Map<String,Object> dologin3(@RequestBody Map<String,Object> reqMap) throws Exception {
String username=reqMap.get("username").toString();
System.out.println(username);
Map<String,Object> map=new HashMap<>();
map.put("aa", "1111");
return map;
}適合 application/json 的情況：
- RESTful API通信
- 復(fù)雜數(shù)據(jù)結(jié)構(gòu)
- 需要明確數(shù)據(jù)類型
- 前后端分離架構(gòu)
- 移動應(yīng)用與服務(wù)器通信
兩種情景是不一樣的，如果你前端傳入的是json格式，那么后端你用：
String uu=request.getParameter("username");
System.out.println(uu);這樣是無法接收到數(shù)據(jù)的，接收到的參數(shù)一直為null，因為json是整體作為一個流傳入到后臺的
相關(guān)文章
這篇文章主要介紹了淺談spring aop的五種通知類型，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
關(guān)于IDEA無法預(yù)覽Markdown文件的解決思路
在IntelliJ IDEA中,有時Markdown文件無法預(yù)覽可能是因為文件關(guān)聯(lián)設(shè)置不正確或配置信息錯誤,首先,檢查IDE的File Types設(shè)置,確保.md和.markdown后綴已正確注冊,其次,對照官方配置信息,調(diào)整Markdown設(shè)置2024-09-09
Java中OSS存儲桶未創(chuàng)建導(dǎo)致的XML錯誤的解決方法
在Java開發(fā)中,集成對象存儲服務(wù)（OSS）時,開發(fā)者常會遇到一個令人困惑的錯誤提示,This XML file does not appear,此錯誤看似與XML文件格式或樣式表有關(guān),實則源于 OSS存儲桶未創(chuàng)建,本文將通過 真實場景還原、逐步排查過程和代碼級解決方案,需要的朋友可以參考下2025-06-06
這篇文章主要介紹了Java多線程中的Interrupt簡析,Interrupt 的其作用是"中斷"線程, 但實際上線程仍會繼續(xù)運行, 這是一個非常容易混淆的概念,Interrupt 的真正作用是給線程對象設(shè)置一個中斷標(biāo)記, 并不會影響線程的正常運行,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了JAVA設(shè)計模式之外觀模式的的相關(guān)資料，文中示例代碼非常詳細(xì)，供大家參考和學(xué)習(xí)，感興趣的朋友可以了解下2021-11-11
Java實現(xiàn)將markdown轉(zhuǎn)換為html
最近因為項目需求需要將AI輸出的結(jié)果導(dǎo)出到word中, 但AI輸出的格式為markdown格式,所以本文我們就來看看如何使用Java實現(xiàn)先將markdown轉(zhuǎn)換為html吧2025-11-11
java發(fā)送http的get、post請求實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨ava發(fā)送http的get、post請求實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了lambdaQueryWrapper多條件嵌套查詢方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教。2022-01-01
這篇文章主要介紹了如何解決Eclipse找不到或無法加載主類問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
存儲時間打算用時間戳來存儲，打算用long類型來代表時間戳，這篇文章主要介紹了深入理解java long 存儲時間戳，非常具有實用價值，需要的朋友可以參考下2018-10-10