この記事では、最も簡単な例を使用して、JavaScript の FormData オブジェクトを示します。
JavaScript の FormData オブジェクトとは?
FormData オブジェクトは、「. XMLHttpRequest 」または取得されます。 HTML フォーム要素と同じ機能を実行します。配列の配列と比較できます。個別の配列は、サーバーに送信する各要素を表します。
構文
JavaScript で FormData オブジェクトを使用するには、次の構文を使用します。
定数 フォームデータ = 新しい フォームデータ ( ) ;
例 1: HTML フォームなしで FormData オブジェクトを作成する
まず、特定の名前で定数を初期化し、その定数に特定の値を割り当てます。ここで、「 新しいフォームデータ() 」は定数値として使用されます。
定数 フォームデータ = 新しい フォームデータ ( ) ;
次に、「」に引数を渡してデータを追加します。 追加() ' 方法
フォームデータ。 追加 ( 'Fname' 、 '役員' ) ;フォームデータ。 追加 ( 「名前」 、 「ジェイブド」 ) ;
フォームデータ。 追加 ( '年' 、 25 ) ;
その後、「 console.log() ' 方法：
コンソール。 ログ ( 「フォーム情報」 ) ;
使用 ' ために 」ループを繰り返して、コンソールに出力を表示します。 console.log() ' 方法：
ために ( formData の let obj ) {コンソール。 ログ ( オブジェクト ) ;
}
例 2: HTML フォームを使用して FormData オブジェクトを作成する
HTML フォームで FormData を追加するには、まず、「 <フォーム> 」要素を編集し、以下にリストされている次の属性を追加します。
- フォームに入力フィールドを追加するには、「 <入力> ' エレメント。
- 入力タグ内に「 タイプ 」属性を使用して、要素のデータ型を定義します。この属性には、「 文章 」、「 番号 」、「 日にち 」、「 パスワード '、 などなど。
- 「 プレースホルダ 」は入力フィールドに表示する値を追加するために使用され、「name」は入力フィールドの名前を参照します。
- 「 オンクリック ユーザーがマウスをクリックして機能を実行すると、イベントがトリガーされます。
< 入力方式 = '文章' 名前 = 「フネーム」 プレースホルダー = 「ファーストネームを入力してください」 >< br >< br >
< 入力方式 = '文章' 名前 = 「名前」 プレースホルダ = 「姓を入力してください」 >< br >< br >
< 入力方式 = '日にち' 名前 = '年' プレースホルダー = 'あなたの年齢を入力' >< br >< br >
< 入力方式 = 'ボタン' 価値 = '入力' オンクリック = 'データ（）' >
形状 >
次に、CSS でフォームにアクセスし、フォームの周囲にスペースを設定します。
. 形状 {マージン : 20px ;
パディング : 30px ;
}
さらに、script タグを使用して、次のコードを追加します。
関数データ ( ) {フォームだった = 書類。 getElementById ( '形状' ) ;
constformData = newFormData ( 形状 ) ;
コンソール。 ログ ( 「フォームデータ」 ) ;
ために ( let obj offormData ) {
コンソール。 ログ ( オブジェクト ) ;
}
}
上記のコード スニペットでは、次のようになります。
- 「を呼び出す getElementById(“フォーム”) 」フォームIDを利用してフォームにアクセスするメソッド。
- 次に、アクセスした要素を新しい定数に格納します “ フォームデータ 」。
- 使用 ' ために 」 反復のためにループし、コンソールに要素を出力します。
出力
JavaScript での FormData オブジェクトの作成について学習しました。
結論
FormData オブジェクトは、サーバーに送信できる JavaScript でデータのコレクションを構築するために使用されます。 JavaScript で Formdata オブジェクトを作成するために、2 つの方法が示されています。 1 つ目は単純な JavaScript を使用する方法で、2 つ目は HTML でフォームを作成し、それを JavaScript とリンクする方法です。この投稿では、JavaScript の FormData オブジェクトについて説明しました。