ホーム » Web API » JavaScript FormData

JavaScript FormData

概要: このチュートリアルでは、JavaScript FormData API について学び、Fetch API を使用して FormData を投稿する方法について説明します。

JavaScript FormData API の概要

名前とメールアドレスの 2 つのフィールドを持つ購読フォームがあるとします。

<form id="subscription">
    <h1>Subscribe</h1>
    <div id="message"></div>
    <div class="field">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your fullname" required />
        <small></small>
    </div>
    <div class="field">
        <label for="email">Email:</label>
        <input type="text" id="email" name="email" placeholder="Enter your email address" required />
        <small></small>
    </div>
    <div class="field">
        <button type="submit" class="full" id="submit">Subscribe</button>
    </div>
</form>Code language: HTML, XML (xml)

送信ボタンをクリックすると、Webブラウザはフォーム内の名前とメールアドレスのフィールドの値をサーバーに送信します。

同様に、FormData インターフェースを使用すると、フォームフィールドとその値を表すキー/値ペアのセットを JavaScript で構築できます。

FormData オブジェクトを作成したら、Fetch API を使用してサーバーに投稿できます。GET リクエストのようにフォームを送信したい場合は、FormData オブジェクトを URLSearchParams コンストラクタに渡すことができます。

FormData オブジェクトの作成

以下は、HTML フォーム要素から新しい FormData オブジェクトを作成します。

const formData = new FormData(form);Code language: JavaScript (javascript)

次のスクリプトは、FormData オブジェクトの値を示しています。

const btn = document.querySelector('#submit');
const form = document.querySelector('#subscription');


btn.addEventListener('click', (e) => {
    // prevent the form from submitting
    e.preventDefault();

    // show the form values
    const formData = new FormData(form);
    const values = [...formData.entries()];
    console.log(values);
});Code language: JavaScript (javascript)

仕組み

  • まず、document オブジェクトの querySelector() メソッドを使用して、送信ボタンを選択します。
  • 次に、送信ボタンのクリックイベントを処理するためのイベントハンドラーを追加します。
  • 次に、フォームの送信を回避するために、イベントオブジェクトの preventDefault() メソッドを呼び出します。
  • その後、フォーム要素から新しい FormData オブジェクトを作成します。
  • 最後に、FormData オブジェクトの entries() メソッドを呼び出します。entries() メソッドはイテレータを返すため、スプレッド演算子 (...) を使用する必要があります。

FormData メソッド

FormData オブジェクトには次のメソッドがあります。

append()

append() メソッドには 2 つの形式があります。

FormData.append(name, value)
FormData.append(name, value, file)Code language: JavaScript (javascript)

append() メソッドは、FormData オブジェクト内の既存のキーに新しい値を追加するか、キーが存在しない場合はキーを追加します。

delete()

FormData.delete(name);Code language: JavaScript (javascript)

delete() メソッドは、FormData オブジェクトからキーの名前でキー/値ペアを削除します。

entries()

FormData.entries()Code language: JavaScript (javascript)

entries() メソッドは、FormData オブジェクト内のすべてのキー/値ペアの イテレータ を返します。

get()

FormData.get(name)Code language: JavaScript (javascript)

get() メソッドは、キー名で最初の値を返します。

getAll()

FormData.getAll(name)Code language: JavaScript (javascript)

getAll() メソッドは、キー名ですべての値の配列を返します。

has()

FormData.has(name);Code language: JavaScript (javascript)

has() メソッドは、FormData オブジェクトにキー名が含まれている場合に true を返します。

keys()

FormData.keys()Code language: JavaScript (javascript)

keys() メソッドは、すべてのキーのイテレータを返します。

set()

set() メソッドには 2 つの形式があります。

FormData.set(name, value);
FormData.set(name, value, filename);Code language: JavaScript (javascript)

set() メソッドは、既存のキー名に新しい値を設定するか、キー/値がまだ存在しない場合は追加します。

values()

FormData.values()Code language: JavaScript (javascript)

values() メソッドは、FormData オブジェクト内のすべての値のイテレータを返します。

Fetch API を使用して FormData を送信する

FetchAPI を使用して FormData オブジェクトをサーバーに投稿する簡単な 購読フォームを構築します。

以下は、Fetch API を使用して FormData を送信する方法を示しています。

const btn = document.querySelector('#submit');
const form = document.querySelector('#subscription');
const messageEl = document.querySelector('#message');

btn.addEventListener('click', (e) => {
    e.preventDefault();
    subscribe();
});

const subscribe = async () => {
    try {
        let response = await fetch('subscribe.php', {
        method: 'POST',
        body: new FormData(form),
        });
        const result = await response.json();

        showMessage(result.message, response.status == 200 ? 'success' : 'error');
    } catch (error) {
        showMessage(error.message, 'error');
    }
};

const showMessage = (message, type = 'success') => {
    messageEl.innerHTML = `
        <div class="alert alert-${type}">
        ${message}
        </div>
    `;
};Code language: JavaScript (javascript)

この例では、subscribe() という名前の関数を定義し、送信ボタンのクリックイベントリスナーで呼び出します。subscribe() 関数は、await キーワードを使用するため、async 関数 です。

subscribe() 関数内

まず、fetch() メソッドを使用してフォームデータを subscribe.php スクリプトに投稿します。

let response = await fetch('subscribe.php', {
    method: 'POST',
    body: new FormData(form),
});Code language: JavaScript (javascript)

次に、response オブジェクトの json() メソッドを呼び出して、JSON レスポンスを取得します。

const result = await response.json();Code language: JavaScript (javascript)

3 番目に、HTTP ステータスコードが 200 の場合は成功メッセージを表示します。それ以外の場合は、エラーメッセージを表示します。result の message プロパティには、成功またはエラーメッセージが格納されます。

showMessage(result.message, response.status == 200 ? 'success' : 'error');Code language: JavaScript (javascript)

最後に、成功またはエラーメッセージを表示する showMessage() 関数を定義します。

const showMessage = (message, type = 'success') => {
    messageEl.innerHTML = `
        <div class="alert alert-${type}">
        ${message}
        </div>
    `;
};Code language: JavaScript (javascript)

すべてをまとめます。

index.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>JavaScript Form Demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="css/style.css" />
    </head>

    <body>
        <div class="container">
            <form id="subscription">
                <h1>Subscribe</h1>
                <div id="message"></div>
                <div class="field">
                    <label for="name">Name:</label>
                    <input type="text" id="name" name="name" placeholder="Enter your fullname" required />
                    <small></small>
                </div>
                <div class="field">
                    <label for="email">Email:</label>
                    <input type="text" id="email" name="email" placeholder="Enter your email address" required />
                    <small></small>
                </div>
                <div class="field">
                    <button type="submit" class="full" id="submit">Subscribe</button>
                </div>
            </form>
        </div>
        <script src="js/app.js"></script>
    </body>

</html>Code language: HTML, XML (xml)

app.js

const btn = document.querySelector('#submit');
const form = document.querySelector('#subscription');
const messageEl = document.querySelector('#message');

btn.addEventListener('click', (e) => {
    e.preventDefault();
    subscribe();
});

const subscribe = async () => {
    try {
        let response = await fetch('subscribe.php', {
            method: 'POST',
            body: new FormData(form),
        });
        const result = await response.json();

        showMessage(result.message, response.status == 200 ? 'success' : 'error');

    } catch (error) {
        showMessage(error.message, 'error');
    }
};

const showMessage = (message, type = 'success') => {
    messageEl.innerHTML = `
        <div class="alert alert-${type}">
        ${message}
        </div>
    `;
};Code language: JavaScript (javascript)

概要

  • JavaScript FormData API を使用して HTML フォームの値をキャプチャします。
  • Fetch API を使用して、FormData をサーバーに送信します。
このチュートリアルは役に立ちましたか？
JavaScript AbortController
前へ
JavaScript AbortController
次へ
JavaScript Dialog API
JavaScript Dialog API