FormData控制台列印為空及使用方法

来源:https://www.cnblogs.com/gxp69/archive/2020/01/14/12192440.html

之前使用formData都是在network中查看參數,最近在做一個項目,介面還沒有,用的假數據做的交互,突發奇想的console.log了 一下,結果是空的。 一開始以為append失效了,經過查證原來:FormData是一種特殊類型的對象,它不可字元串化,不能僅使用console.log列印出來 ...


 之前使用formData都是在network中查看參數,最近在做一個項目,介面還沒有,用的假數據做的交互,突發奇想的console.log了 一下,結果是空的。

一開始以為append失效了,經過查證原來:FormData是一種特殊類型的對象,它不可字元串化,不能僅使用console.log列印出來。

如果需要列印可以:

formData.forEach((value, key) => {
     console.log("key %s: value %s", key, value);
})

 

FormData常用方法:

一.創建一個formData對象實例的方式
1、創建一個空對象
 
var formData = new FormData();//通過append方法添加數據
1
2、使用已有表單來初始化對象
 
//表單示例
<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psw">密碼
    <input type="submit" value="提交">
</form>
 
//方法示例
// 獲取頁面已有的一個form表單
var form = document.getElementById("myForm");
// 用表單來初始化
var formData = new FormData(form);
// 我們可以根據name來訪問表單中的欄位
var name = formData.get("name"); // 獲取名字
var psw = formData.get("psw"); // 獲取密碼
// 當然也可以在此基礎上,添加其他數據
formData.append("token","kshdfiwi3rh");
  
 
二. 操作方法
formData裡面存儲的數據是以健值對的形式存在的,key是唯一的,一個key可能對應多個value。
如果是使用表單初始化,每一個表單欄位對應一條數據,它們的HTML name屬性即為key值,它們value屬性對應value值。
1.獲取值
 
//通過get(key)/getAll(key)來獲取對應的value
formData.get("name"); // 獲取key為name的第一個值
formData.get("name"); // 返回一個數組,獲取key為name的所有值
  
 
//通過append(key, value)來添加數據,如果指定的key不存在則會新增一條數據,如果key存在,則添加到數據的末尾
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v3");
獲取值時方式及結果如下
 
formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v3"]
3.設置修改數據
 
//set(key, value)來設置修改數據,如果指定的key不存在則會新增一條,如果存在,則會修改對應的value值
formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]
4.判斷是否存在對應數據
 
//has(key)來判斷是否對應的key值
formData.append("k1", "v1");
formData.append("k2",null);
 
formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false
5.刪除數據
 
//delete(key)刪除數據
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");
 
formData.getAll("k1"); // []

您的分享是我們最大的動力!

更多相關文章
  • 一、a標簽的偽類選擇器 1.通過觀察可以發現a標簽存在一定狀態 (1)預設狀態,從未被訪問過 (2)被訪問過的狀態 (3)滑鼠長按的狀態 (4)滑鼠懸停在a標簽上的演示 2.什麼是a標簽的偽類選擇器? a標簽的偽類選擇器是專門用來修改a標簽不同狀態的樣式。 a:link{} 用來修改預設的樣式 a: ...
  • 在Vue開發中,列表數據綁定非常簡單易用,本文主要通過一些簡單的小例子,講述v-for的使用方法,僅供學習分享使用,如有不足之處,還請指正。 ...
  • HTML特殊字元編碼對照表 特殊符號 命名實體 十進位編碼 特殊符號 命名實體 十進位編碼 特殊符號 命名實體 十進位編碼 Α &Alpha; &#913; Β &Beta; &#914; Γ &Gamma; &#915; Δ &Delta; &#916; Ε &Epsilon; &#917; Ζ ...
  • import React, { Component } from 'react' import "./footer.css"; //引入外部樣式表 export default class footer extends Component { //這裡的extends繼承父類的屬性和方法,但是沒有自 ...
  • 數組和偽數組 偽數組和數組的區別 真數組的長度是可變的 偽數組的長度不可變 function f1() { var sum = 0; for (var i = 0; i < arguments.length; i++) { sum += arguments[i]; } console.log(sum ...
  • 正則表達式其他方法的使用 正則表達式中:g 表示的是全局模式匹配 正則表達式中:i 表示的是忽略大小寫 var str = "中國移動:10086,中國聯通:10010,中國電信:10000"; //把裡面所有的數字全部顯示出來 var array = str.match(/\d{5}/g); co ...
  • <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=" ...
  • 案例:驗證表單 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { background: #ccc; } labe ...
一周排行
  • 微信公眾號: "Dotnet9" ,網站: "Dotnet9" ,問題或建議: "請網站留言" , 如果對您有所幫助: "歡迎贊賞" 。 .NET CORE(C ) WPF 抽屜式菜單 閱讀導航 1. 本文背景 2. 代碼實現 3. 本文參考 4. 源碼 1. 本文背景 使用簡單動畫實現抽屜式菜單 ...
  • 在上面abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之八(三十四) 文章的學習之後。我們通過前面的八篇文章已經學習了通過WebAPI介面與控制器去實現新增、刪除與修改功能。接下來,我們要在控制器中實現查詢功能。 ...
  • 1.選中項目-->屬性-->生成-->選中 XML文檔文件(xml路徑和該項目相同) 2.選擇生成序列化程式集:自動/開 ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7640873.html,記錄一下學習過程以備後續查用。 一、引言 從今天開始我們開始講結構型設計模式,結構型設計模式有如下幾種:適配器模式、橋接模式、裝飾模式、組合模式、外觀模式、享元模式、代理模式。 創建型設 ...
  • C 中 ConfigureAwait 相關答疑FAQ 在前段時間經常看到園子里有一些文章討論到 ConfigureAwait,剛好今天在微軟官方博客看到了 "Stephen Toub" 前不久的一篇答疑 ConfigureAwait 的一篇文章,想翻譯過來。 原文地址:https://devblog ...
  • 想要實現二維數組中根據某個欄位排序,一般可以通過數組迴圈對比的方式實現。這裡介紹一種更簡單的方法,直接通過PHP函數實現。array_multisort() :可以用來一次對多個數組進行排序,或者根據某一維或多維對多維數組進行排序。詳細介紹可參考PHP手冊:https://www.php.net/m ...
  • 常用的軟體: 播放器: cloundMusic(網易雲音樂) https://music.163.com/#/download PotPlayer(一款強大的視頻播放器) https://daumpotplayer.com/download/ ACDsee(ACDsee圖片編輯器免費版) https ...
  • 發現問題 在一次偶然中,在爬取某個網站時,老方法,打開調試工具查看請求方式,請求攔截,是否是非同步載入,不亦樂乎,當我以為這個網站非常簡單的時候,發現二級網頁的地址和源碼不對應 Ajax非同步載入?源碼也是這樣的 而且這些鏈接直... ...
  • 準備年後要跳槽,所以最近一直再看面試題,並且把收集到的面試題整理了以下發到博客上,希望對大家有所幫助。 首先是集合類的面試題 1. HashMap 排序題,上機題。 已知一個 HashMap<Integer,User>集合, User 有 name(String)和 age(int)屬性。請寫一個方 ...
  • JVM體繫結構圖 Native Interface(本地介面) Java本地介面(Java Native Interface (JNI))允許運行在Java虛擬機(Java Virtual Machine (JVM))上的代碼調用本地程式和類庫,或者被它們調用,這些程式和類庫可以是其它語言編寫的,比 ...
x