HTML5 FormDataインターフェイスを使用したより簡単なAJAX

Ajaxを介したフォームの送信の処理は、単一ページのアプリケーションとプログレッシブエンハンスメントにとって重要です。 典型的な形式を調べてみましょう：

<form id="myform" action="webservice.php" method="post">
  <input type="email" name="email" />
  <select name="job">
    <option value="">Select Role</option>
    <option>web developer</option>
    <option>IT professional</option>
    <option>other</option>
  </select>
  <input type="checkbox" name="freelancer" /> are you a freelancer?
  <input type="radio" name="experience" value="4" /> less than 5 year's experience
  <input type="radio" name="experience" value="5" /> 5 or more year's experience
  <textarea name="comments" rows="3" cols="60"></textarea>
  <input type="submit" value="Submit">
</form>

jQueryは、ajaxのフォームデータシリアル化を簡素化します：

$("#myform").on("submit", function(e) {
  e.preventDefault();
  $.post(this.action, $(this).serialize());
});

プレーンJavaScriptには、手動データ抽出が必要です：

ただし、HTML5

document.getElementById("myform").onsubmit = function(e) {
  e.preventDefault();
  var f = e.target, formData = '', xhr = new XMLHttpRequest();
  for (var i = 0, d, v; i < f.elements.length; i++) {
    d = f.elements[i];
    if (d.name && d.value) {
      v = (d.type == "checkbox" || d.type == "radio" ? (d.checked ? d.value : '') : d.value);
      if (v) formData += d.name + "=" + escape(v) + "&";
    }
  }
  xhr.open("POST", f.action);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
  xhr.send(formData);
};

インターフェイスは、このプロセスを大幅に合理化します

FormDataこの簡潔なコードは、jQueryに相当するものよりも高速で読みやすいです。

エンコードを自動的に処理します。 ファイルのアップロードを有効にする

document.getElementById("myform").onsubmit = function(e) {
  e.preventDefault();
  var f = e.target, formData = new FormData(f), xhr = new XMLHttpRequest();
  xhr.open("POST", f.action);
  xhr.send(formData);
};

を使用します。 手動でデータを追加することもできます：

FormData multipart/form-dataファイルまたはブロブは、オプションのファイル名で追加できます。

非常に古いIEバージョンのみを除く幅広いブラウザサポートを楽しんでいます。 詳細については、リファレンスとMDNドキュメントを参照してください。

var formData = new FormData();
formData.append("name", "value");
formData.append("a", 1);
formData.append("b", 2);

HTML5 FormDataインターフェイスとAjax

に関するよくある質問 FormData html5 formdataインターフェイスは何ですか？ajaxでどのように機能しますか？ FormDatahtml5

インターフェイスは、Ajax要求のフォームデータを表すキー価値ペアの作成を簡素化することを簡素化します。 Ajaxは、サーバーとの非同期データ交換を可能にし、完全なリロードなしでWebページを更新します。

formdataオブジェクトを作成するにはどうすればよいですか？

空のオブジェクトを使用するか、

を使用してフォーム要素から作成します。

formdataオブジェクトにデータを追加するにはどうすればよいですか？FormData

メソッドを使用します

ajaxリクエストでformdataオブジェクトを送信するにはどうすればよいですか？

new FormData()new FormData(formElement)を使用します。

ヘッダーは自動的に

。

に設定されています

jqueryのajaxメソッドでformdataインターフェイスを使用できますか？append(name, value)

はい、しかし

と

。

を設定します xhr.send(formData)ブラウザがFormDataインターフェイスをサポートしているかどうかを確認するにはどうすればよいですか？ Content-Typemultipart/form-data。

を使用します

FormDataインターフェイスを使用してファイルを送信できますか？

はい、

またはprocessData: falseオブジェクトを追加します。contentType: false

formdataオブジェクトからデータを削除できますか？

はい、

メソッドを使用します。if ("FormData" in window) { ... }

フォームダタオブジェクトのデータを反復することはできますか？

はい、

、File、Blob、または

。

を使用します

fech？

でformdataインターフェイスを使用できますか？ delete(name)はい、

リクエストのとしてそれを渡します。

以上がHTML5 FormDataインターフェイスを使用したより簡単なAJAXの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。