1つのAjax関数とFormDataでGETとPOSTリクエストを送信する

Question

すべてのformサブミットを処理する関数を書いた。 結果は常にhtmlです。content -divに挿入します。だから私はデフォルトのイベントを防ぐ。

この関数は、ポストリクエスト（ファイルを含む）とgetリクエストを処理する必要があります。

私はFormDataを使用しています。私は、次の構成設定の要求処理するには：

• ポスト

  • processData = false
  • contentType = false

• は

  を取得します
  • processData = true（デフォルト）
  • contentType = application/x-www-form-urlencoded; charset=UTF-8（デフォルト）

しかし、私は要求を取得する火災時に、私が取得：

TypeError: 'append' called on an object that does not implement interface FormData.

設定するときに、私はこのエラーを修正することができ両方の設定をfalseに設定しますが、データは送信されません。

$('#content').on('submit', 'form', function(event) { // apply to all form-elements in the content-div 
    event.preventDefault(); 

    var $form = $(this); 
    var formData = new FormData(this); 

    $.ajax({ 
     url: $form.attr('action'), 
     type: $form.attr('method'), 
     data: formData, 
     processData: ($form.attr('method') === 'GET'), 
     contentType: ($form.attr('method') === 'GET') ? 'application/x-www-form-urlencoded; charset=UTF-8' : false, 
     success: function(data, textStatus, jqXHR) { 
      $('#content').html(data); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
      // 
     } 
    }) 
}); 

これは動作します：

data: ($form.attr('method') === 'GET') ? $form.serialize() : new FormData(this), 

これは私がGETリクエストのためFormDataを使用することはできませんということですか？または、両方のリクエストタイプを正常に処理するためにスニペットを変更するにはどうすればよいですか？

Answer 1

この状況では、設定オブジェクトを作成することをお勧めします。

var ajaxConfig = { 
    url: $form.attr('action'), 
    type: $form.attr('method'), 
    processData: ($form.attr('method') === 'GET'), 
    contentType: ($form.attr('method') === 'GET') ? 
     'application/x-www-form-urlencoded; charset=UTF-8' : false 
}; 

if($form.attr('method') === 'POST') { 
    ajaxConfig.data = formData; 
} 

$.ajax(ajaxConfig);