通过一个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);