jQuery を使用せずに HTML5 FormData エントリを JSON に変換するにはどうすればよいですか?-jsチュートリアル-php.cn

jQuery を使用せずに HTML5 FormData エントリを JSON に変換するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-10-29 19:48:02

オリジナル

230 人が閲覧しました

How to Convert HTML5 FormData Entries into JSON without jQuery?

HTML5 FormData エントリの JSON への変換

フォームデータを操作してサーバーエンドポイントまたは API に渡す場合、HTML5 FormData エントリを JSON に変換することが不可欠です。 jQuery やシリアル化に依存しないソリューションは次のとおりです。

var object = {};
formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);

ログイン後にコピー

読みやすさと簡潔性を高めるために、ES6 のアロー関数を使用できます。

var object = {};
formData.forEach((value, key) => object[key] = value);
var json = JSON.stringify(object);

ログイン後にコピー

複数値の処理フォーム要素:

複数の値を持つ複数選択リストまたは他のフォーム要素をサポートする必要がある場合は、次のようにソリューションを拡張できます:

var object = {};
formData.forEach((value, key) => {
    if(!Reflect.has(object, key)){
        object[key] = value;
        return;
    }
    if(!Array.isArray(object[key])){
        object[key] = [object[key]];    
    }
    object[key].push(value);
});
var json = JSON.stringify(object);

ログイン後にコピー

直接変換せずにサーバーに送信:

FormData をサーバーに送信することが目的の場合は、JSON 変換ステップをバイパスし、Ajax または Fetch API 経由で FormData オブジェクト自体を直接送信できます:

var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/submitform.php');
request.send(formData);

ログイン後にコピー

fetch('http://example.com/submitform.php', {
  method: 'POST',
  body: formData
}).then((response) => { 
  // Handle server response here... 
});

ログイン後にコピー

シリアル化不可能なオブジェクトに関する考慮事項:

JSON stringify メソッドは、追加のカスタマイズを行わないと、すべての種類のオブジェクトを処理できない場合があることに注意してください。オブジェクトのシリアル化で問題が発生した場合は、オブジェクトに独自の toJSON() メソッドを定義して、必要なシリアル化動作を指定できます。

以上がjQuery を使用せずに HTML5 FormData エントリを JSON に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。