SpringMVC 通過ajax 前后端數據交互

在前端的開發過程中,經常在html頁面通過ajax進行前后端數據的交互,SpringMVC的controller進行數據的接收,但是有的時候后端會出現數據無法接收到的情況,這個是因為我們的參數和前端ajax的contentType參數 類型不對應的情景,或者說contentType和后臺controller 方法參數到底存在什么樣的關系

普通的參數我們傳遞的時候往往是這樣的兩種情況:

contentType: "application/x-www-form-urlencoded",
contentType: "application/json",

這樣的兩種方式有什么樣的區別,

第一種方式:application/x-www-form-urlencoded 參數會解析為參數表,比如:

  • 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?的情況:

  • 傳統HTML表單提交

  • 簡單的鍵值對數據

  • 需要向后兼容老系統

  • 文件上傳(結合multipart/form-data

第二種方式:contentType: "application/json", 整個body作為單一數據流處理,比如:

{"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后臺接受前臺傳入參數的代碼如下:@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通信

  • 復雜數據結構

  • 需要明確數據類型

  • 前后端分離架構

  • 移動應用與服務器通信

兩種情景是不一樣的,如果你前端傳入的是json格式,那么后端你用:

?? ?String uu=request.getParameter("username");
?? ?System.out.println(uu);

這樣是無法接收到數據的,接收到的參數一直為null,因為json是整體作為一個流傳入到后臺的

希望對你有所幫助!

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/79101.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/79101.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/79101.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

最新DeepSeek-Prover-V2-671B模型 簡介、下載、體驗、微調、數據集:專為數學定理自動證明設計的超大垂直領域語言模型(在線體驗地址)

DeepSeek-Prover-V2-671B模型 簡介、下載、體驗、微調、數據集&#xff1a;專為數學定理自動證明設計的超大垂直領域語言模型&#xff08;在線體驗地址&#xff09; 體驗地址&#xff1a;[Hugging Face 在線體驗]https://huggingface.co/playground?modelIddeepseek-ai/DeepS…

Kafka的Topic分區數如何合理設置?

一、分區數設置原則 1. 并發能力基準 分區數決定最大消費者并行度&#xff0c;建議設置為消費者組內消費者數量的整數倍 例如&#xff1a;消費者組有4個實例 → 分區數設為4/8/12等 這里定義的目的是為了讓消費者能均勻的分配到分區&#xff0c;避免打破負載均衡&#xff0c;…

章越科技賦能消防訓練體征監測與安全保障,從傳統模式到智能躍遷的實踐探索

引言&#xff1a;智能化轉型浪潮下&#xff0c;消防訓練的“破局”之需 2021年《“十四五”國家消防工作規劃》的出臺&#xff0c;標志著我國消防救援體系正式邁入“全災種、大應急”的全新階段。面對地震、洪澇、危化品泄漏等復雜救援場景&#xff0c;消防員不僅需要更強的體…

【數據庫原理及安全實驗】實驗五 數據庫備份與恢復

指導書原文 數據庫的備份與恢復SSMS 【實驗目的】 1) 熟悉并掌握利用界面操作進行數據庫備份和恢復的原理和操作。 【實驗原理】 1) 數據庫的恢復包括大容量日志恢復模式和簡單恢復模式。其中大容量日志恢復模式&#xff0c;簡單地說就是要對大容量操作進行最小日志記錄&a…

Linux 基礎IO(上)--文件與文件描述符fd

前言&#xff1a; 在生活里&#xff0c;我們常和各種文件打交道&#xff0c;像用 Word 寫文檔、用播放器看視頻&#xff0c;這些操作背后都離不開文件的輸入輸出&#xff08;I/O&#xff09;。在 Linux 系統中&#xff0c;文件 I/O 操作更是復雜且關鍵。 接下來我們將深入探討…

快速了解Go+rpc

更多個人筆記&#xff1a;&#xff08;僅供參考&#xff0c;非盈利&#xff09; gitee&#xff1a; https://gitee.com/harryhack/it_note github&#xff1a; https://github.com/ZHLOVEYY/IT_note 文章目錄 rpc基礎概念GO的rpc應用簡單編寫json編寫rpc rpc基礎概念 電商系統…

基于大模型的膀胱腫瘤全周期診療方案研究報告

目錄 一、引言 1.1 研究背景與意義 1.2 研究目的與方法 1.3 國內外研究現狀 二、大模型預測膀胱腫瘤的原理與技術基礎 2.1 大模型介紹 2.2 預測原理 2.3 技術支撐 三、術前風險預測與準備方案 3.1 腫瘤分期與惡性程度預測 3.2 患者身體狀況評估 3.3 術前準備工作 …

2025年4月個人工作生活總結

本文為 2025年4月工作生活總結。 研發編碼 一個項目的臨時記錄 自2月份領導讓我牽頭負責一個項目起&#xff0c;在本月算是有較多時間投入——但也是與之前的相比。 月初&#xff0c;清明節前一晚上&#xff0c;因某事務被叫上參加臨時緊急遠程會議&#xff0c;幾方領導都在…

Python爬蟲實戰:獲取軟科網最新特定專業大學排名數據并做分析,為高考填報志愿做參考

一、引言 在高考升學的重要階段,志愿填報成為考生和家長關注的核心問題。準確、全面且具有權威性的大學專業排名數據,是考生做出科學志愿決策的關鍵依據。軟科網作為專業的大學排名信息發布平臺,其發布的計算機科學與技術專業排名數據,因具有較高的公信力和參考價值,備受…

自學S32k144(18)————芯片鎖死問題及成功解鎖流程

1.鎖死原因 溫度過高flash異常操作靜電等電壓異常問題。。。。 本人出現情況&#xff1a;之前開發板不知什么原因&#xff0c;發生短路&#xff0c;重新置換芯片后&#xff0c;發現芯片在S32DS中無法正常燒錄 判斷可能是由于焊接時溫度過高導致鎖死。需解鎖芯片。 2.解決方法…

ISIS的由于L1產生的一系列問題

如果有些名詞不清晰可以查看之前文章 L1訪問其他區域使用缺省路由會引發次優路徑問題&#xff0c;但次優路徑leak路由又會引發路由環路問題&#xff0c;下面將會從去缺省路由到路由環路一一解決 Level 1的缺省路由 L1訪問其他區域使用缺省路由 --> 引發次優路徑 --> 引…

C++繼承(下)

目錄 一、繼承與友元 二、繼承與靜態成員 三、菱形繼承及菱形虛擬繼承 1. 繼承的方式 2. 菱形繼承的問題 3. 菱形虛擬繼承 4. 虛擬繼承解決數據冗余和二義性的原理 4.1 普通菱形繼承的內存布局 4.2 虛擬繼承的內存布局 四、繼承的總結和反思 1. 多繼承的復雜性 2.…

【漫話機器學習系列】233.激活閾(Threshold Activation)

深度學習入門&#xff1a;了解“閾值激活函數”&#xff08;Threshold Activation Function&#xff09; 激活函數是神經網絡中至關重要的一環。今天&#xff0c;我們通過一幅簡單直觀的手繪圖&#xff0c;一起理解最早期也最基礎的激活函數之一 —— 閾值激活函數&#xff08;…

(4)python中jupyter lab使用python虛擬環境

1. 先了解IPython和IPyKernel簡介 IPython 是一個功能強大的交互式 Python 解釋器和開發環境。它提供了一種增強的 Python Shell,使得用戶能夠以交互的方式探索、分析和可視化數據。IPython 的名稱來源于 "Interactive Python",體現了其交互式的特性。 IPyKernel 是…

nginx 配置要領

你提出的問題非常好&#xff01;確實在配置 WebSocket 代理時&#xff0c;proxy_pass 的 URL 處理需要特別注意。以下是關鍵解釋和修正建議&#xff1a; 1. 原配置的問題分析 location /ws/ {proxy_pass http://fastapi-container:8000; # 會保留 /ws/ 前綴傳遞給后端 }這種配…

【AI】DeepSeek 流程圖 / 時序圖制作,Word 排版錯亂問題,文字轉直觀圖形

一&#xff1a;動態流程圖 / 時序圖制作&#xff08;DeepSeek Draw.IO&#xff09; 工具準備 DeepSeek&#xff08;AI 生成代碼&#xff09;&#xff1a;官網&#xff08;免費&#xff09;Draw.IO&#xff08;可視化渲染&#xff09;&#xff1a;官網&#xff08;免費&#…

4. python3基本數據類型

Python3 中有六個標準的數據類型&#xff1a; Number&#xff08;數字&#xff09; String&#xff08;字符串&#xff09; List&#xff08;列表&#xff09; Tuple&#xff08;元組&#xff09; Set&#xff08;集合&#xff09; Dictionary&#xff08;字典&#xff09; Pyt…

WPF之TextBox控件詳解

文章目錄 1. TextBox概述2. 基本屬性與功能3. 輸入控制詳解3.1 MaxLength3.2 AcceptsReturn3.3 AcceptsTab3.4 CharacterCasing3.5 IsUndoEnabled3.6 自定義輸入限制 4. 文本選擇與操作4.1 選擇屬性4.2 選擇方法4.3 文本操作4.4 選擇事件4.5 實現自定義文本處理功能 5. 滾動支持…

1.4 點云數據獲取方式——結構光相機

圖1-4-1結構光相機 結構光相機作為獲取三維點云數據的關鍵設備,其工作原理基于主動式測量技術。通過投射已知圖案,如條紋、點陣、格雷碼等,至物體表面,這些圖案會因物體表面的高度變化而發生變形。與此同時,利用相機從特定

【MATLAB第118期】基于MATLAB的雙通道CNN多輸入單輸出分類預測方法

【MATLAB第118期】基于MATLAB的雙通道CNN多輸入單輸出分類預測方法 一、雙通道CNN簡介 在深度學習領域&#xff0c;卷積神經網絡&#xff08;CNN&#xff09;憑借其強大的特征提取能力&#xff0c;已成為圖像識別、自然語言處理等任務的核心技術。傳統單通道CNN在處理單一模態…