通過一個Ajax函數和FormData發送GET和POST請求

Question

我已經編寫了一個處理所有form提交的函數。 結果始終爲html，我將其插入到我的content -div中。這就是爲什麼我阻止默認事件。

函數應該處理post請求（包括文件）並獲取請求。我正在使用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);