Vue 接口用FormData() 提交數據

例子:

let data = { id: 12, name: '測試', list: [{ id: 22, name: "za", age: 12 }] };// 創建 FormData 實例

????????要使用 FormData 將數據提交給接口,首先需要了解 FormData 是如何工作的。FormData 是一種用于異步上傳數據的表單數據結構,它可以讓你以一種簡單的方式發送鍵值對。

????????例子中,你有一個 JavaScript 對象 data,它包含了嵌套的數據結構。要將這個對象轉換為 FormData,我們需要遍歷這個對象,并將每個鍵值對添加到 FormData 實例中。

????????下面是一個示例代碼,展示了如何將你的 data 對象轉換為 FormData,并使用 fetch API 將其提交給接口:

let data = { id: 12, name: '測試', list: [{ id: 22, name: "za", age: 12 }] };// 創建 FormData 實例
let formData = new FormData();// 函數用于遞歸地將對象添加到 FormData
function addToFormData(obj, formData) {for (let key in obj) {if (obj.hasOwnProperty(key)) {// 如果是對象,則遞歸調用if (typeof obj[key] === 'object') {addToFormData(obj[key], formData);} else {// 否則,直接添加formData.append(key, obj[key]);}}}
}// 將數據添加到 FormData
addToFormData(data, formData);// 使用 fetch API 提交 FormData
fetch('YOUR_ENDPOINT_URL', {method: 'POST',body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

????????在這個代碼中,我們首先定義了一個 addToFormData 函數,它遞歸地遍歷對象并將每個鍵值對添加到 FormData 實例中。然后,我們使用 fetch API 將 FormData 發送到服務器。請確保替換 'YOUR_ENDPOINT_URL' 為你的實際接口 URL。

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

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

相關文章

C語言-分支與循環(2)

目錄 1、while循環 1.1 if 和 while 的對比 1.2 while 語句的執行流程 6.3 while循環簡單例題 2、for 循環 2.1 語法形式 2.2 for循環與while循環對比 2.3 for循環的執行流程 2.4 for循環的簡單例題 2.5 擴展:for循環的初始化,判斷,…

django學習入門系列之第四點《圖標》

文章目錄 圖標往期回顧 圖標 圖標網站: Font Awesome,一套絕佳的圖標字體庫和CSS框架 (dashgame.com) bootstrap提供的不多 注意,要用框架啟動,但用html啟動的話是用不了的(圖標啟動不了) 如何使用 如果…

DAMA學習筆記(六)-數據安全

1.引言 數據安全包括安全策略和過程的規劃、建立與執行,為數據和信息資產提供正確的身份驗證、授權、訪問和審計。數據安全實踐的目標是根據隱私和保密法規、合同協議和業務要求來保護信息資產。這些要求來自以下幾個方面: 1)利益相關方: 應識別利益相關…

YOLO--置信度(超詳細解讀)

YOLO(You Only Look Once)算法中的置信度(Confidence)是一個關鍵概念,用于評估模型對預測框內存在目標對象的信心程度以及預測框對目標對象位置的準確性。 一、置信度的定義 數值范圍:置信度是一個介于0和…

ES6 對象的擴展(十五)

1. 屬性的簡潔表示(Property Shorthand) 特性:在對象字面量中,如果屬性名和變量名相同,可以省略屬性名,直接使用變量值。 用法:簡化對象字面量的書寫。 const x 1, y 2; const obj { x, y …

vscode 打開遠程bug vscode Failed to parse remote port from server output

vscode 打開遠程bug vscode Failed to parse remote port from server output 原因如圖: 解決:

網絡濾波器、EMI濾波器與EMC濾波器在電子元器件中的分類關系

在電子工程領域,濾波器作為關鍵的電子元器件,廣泛應用于信號處理、電磁兼容性和電磁干擾抑制等方面。本文將詳細介紹網絡濾波器、EMI濾波器和EMC濾波器的基本概念、工作原理及其在電子元器件中的分類關系。 一、網絡濾波器 網絡濾波器是一種通過處理信號…

Laravel與現代前端:Vue.js與React的無縫集成

Laravel與現代前端:Vue.js與React的無縫集成 在現代Web開發中,Laravel作為后端框架的佼佼者,與前端技術如Vue.js和React的結合,能夠創造出功能強大且用戶友好的應用。本文將詳細介紹如何在Laravel項目中集成Vue.js和React&#x…

臉書登錄指南:如何在同一臺設備登錄多個Facebook賬號?

海外社媒營銷人員和跨境賣家現在越來越依賴社交媒體平臺來拓展業務和接觸潛在客戶,尤其是Facebook。然而,在進行臉書登錄時,你可能會問:如何在同一臺設備上登錄多個Facebook賬號,而不違反Facebook的使用條款&#xff1…

Android 性能優化之卡頓優化

文章目錄 Android 性能優化之卡頓優化卡頓檢測TraceView配置缺點 StricktMode配置違規代碼 BlockCanary配置問題代碼缺點 ANRANR原因ANRWatchDog監測解決方案 Android 性能優化之卡頓優化 卡頓檢測 TraceViewStricktModelBlockCanary TraceView 配置 Debug.startMethodTra…

vivado 2019.2/modelsim SE-64 2019.2聯合仿真

參考鏈接 需要修改的地方: 編譯時幾個VHDL的庫會報錯,將language改為verilogfamily只選擇當前板子(artix-7),速度會更快,錯誤率更低compile library path最好選擇vivado安裝路徑下的位置,很久之…

怎么創一個新的vue3項目

創建一個新的Vue 3項目可以通過多種方式,以下是基于Vue CLI(命令行界面)和Vue官方新的腳手架工具create-vue的詳細步驟。 使用Vue CLI創建Vue 3項目 安裝Vue CLI: 確保你已經安裝了Node.js(建議使用LTS版本&#xff…

Python 基礎——元組

1.元組:元組元素不能修改 tuple1 (1, 2, 3, 4, 5, 6) tuple1[2] 3 #該代碼會顯示運行錯誤 2.元組的一些操作 #1. tuple1 (1, 2, 3, 4, 5, 6) tuple2 tuple1[:]#將tuple1復制到tuple2#2. tuple1 (1, 2, 3, 4, 5, 6) tuple1[:4] #輸出結果為(1&am…

用于大規模圖像識別的深度卷積網絡

概述 論文地址:https://arxiv.org/pdf/1409.1556.pdf 這項研究探討了卷積網絡深度對圖像識別準確性的影響。重要的是,對具有小型卷積濾波器的網絡進行的評估表明,具有 16-19 個權重層的深度網絡的性能優于傳統配置。這些結果使得該模型在20…

把ros消息轉換成中文輸出

把ros消息轉換成中文輸出 c實現 發布 //發布性能評估數據 /trilateration_time_log void publishTrilaterationLog(const int reflectorPanelPoints_size,const double duration_count,const std::string& resultType,const std::string& resultChineseMessage,cons…

C#繪制含流動塊的管道

1,效果。 2,繪制技巧。 1,流動塊的實質是使用Pen的自定義DashStyle繪制的線,并使用線的偏移值呈現出流動的效果。 Pen barPen new Pen(BarColor, BarHeight);barPen.DashStyle DashStyle.Custom;barPen.DashOffset startOffse…

MySQL-日志-優化

目錄 介紹一下mysql 的日志 redo log 和binlog 的區別及應用場景 redo log 和 binlog 在恢復數據庫有什么區別? redo log 是怎么實現持久化的? redo log除了崩潰恢復還有什么其他作用? (順序寫) redo log 怎么刷入磁盤的知道嗎? 兩階…

重塑水利未來:智慧水利解決方案的探索與實踐,從物聯網、大數據到人工智能,科技如何賦能水利行業,實現智慧化管理與決策

本文關鍵詞:智慧水利、智慧水利工程、智慧水利發展前景、智慧水利技術、智慧水利信息化系統、智慧水利解決方案、數字水利和智慧水利、數字水利工程、數字水利建設、數字水利概念、人水和協、智慧水庫、智慧水庫管理平臺、智慧水庫建設方案、智慧水庫解決方案、智慧…

探索 IPython 的歷史記錄:全局命令的魔法

探索 IPython 的歷史記錄:全局命令的魔法 在數據科學和編程的世界里,IPython 以其強大的交互式特性成為了開發者和科學家們的首選工具。其中,IPython 的歷史記錄功能是其眾多亮點之一。本文將帶你深入探索如何在 IPython 中使用 %history 魔…

Python之爬蟲基礎

Python 是進行網絡爬蟲開發的熱門選擇,主要是因為其擁有豐富的庫和框架,如 Requests、BeautifulSoup、Scrapy 等,這些工具極大地簡化了網頁數據的抓取和處理過程。以下是一些 Python 爬蟲的基礎知識和步驟: 1. 理解網絡爬蟲 網絡…