javascript、ajax：formdataの取得(get())

基本

「get()」を使う。

〇〇〇.get(×××);

サンプル

var fd = new FormData();
fd.append('foo', 'abc');
fd.append('bar', 'def');

var foo = fd.get('foo');

「ajax()」の「fail()」で使いたい

var fd = new FormData();
fd.append('foo', 'abc');
fd.append('bar', 'def');

$.ajax({
   url: url,
   data: fd,
   type: 'POST',
   dataType: 'json',
   contentType: false,
   processData: false,
   timeout: 10*1000
}).done(function(data) {
   // 成功時の処理
}).fail(function(jqXHR, textStatus, errorThrown) {
   // 失敗時の処理
   var foo = this.data.get('foo');
}).always(function() {
});

経緯

１．ボタンを押す
２．ボタンを無効化して、ボタンに設定したIDをFormDataにして、ajax実行
３．成功時はボタンを削除
４．失敗時はボタンを再有効化
ってことをしたかった。

ボタンが１つしかないなら良いんだけど、複数あって・・・ってコトで。

$(〇〇〇).on('click', 〇〇〇, function(){
   if ( $(this).hasClass(〇〇〇) ) {
      // 任意のクラス名があるならajaxを実行せずに終了
      return false;
   }
   else {
      // 任意のクラス名を追加
      $(this).addClass(〇〇〇);
   }
   
   // 送りたいデータをFormDataに放り込んでいく。
   var fd = new FormData();
   fd.append('id', $(this).attr('id'));
   
   $.ajax({
      url: 〇〇〇〇,
      data: fd,
      ～ 略 ～
   }).done(function(data) {
      // 成功時の処理
   }).fail(function(jqXHR, textStatus, errorThrown) {
      // 失敗時の処理：追加したクラス名を削除
      $( '#'+this.data.get('id') ).removeClass(〇〇〇);
   }).always(function() {
   });
});

※試していないけど、成功時もget()は使えるはず。使えるけどレスポンスに必要な値をセットしてやれば良いだけだから使うコトがあるかどうかは微妙。

以前、リクエストに使ったFormDataを取得しようとしたら、ブラウザによっては取得できなかった。
それが、get()で取得しようとしたのか、別の何かで取得しようとしたのかは、記憶にない。