Laravel 5.4无法解析使用Jquery Ajax发送的FormData javascript对象_Ajax_Laravel_Http_Laravel 5.4_Form Data

Laravel 5.4无法解析使用Jquery Ajax发送的FormData javascript对象

ajax laravel http

Laravel 5.4无法解析使用Jquery Ajax发送的FormData javascript对象,ajax,laravel,http,laravel-5.4,form-data,Ajax,Laravel,Http,Laravel 5.4,Form Data,最近我一直在尝试解决一个问题，但运气不好，基本上我正在尝试使用AJAX向服务器提交一个表单，表单有文件，所以我在jQuery1.12中使用FormDatajavascript对象。数据到达服务器，但我不知道如何格式化它这是我的AJAX函数： function saveMenu(id){ var formElement = document.getElementById("menu-form"); var formData = new FormData(formElement);

最近我一直在尝试解决一个问题，但运气不好，基本上我正在尝试使用AJAX向服务器提交一个表单，表单有文件，所以我在jQuery1.12中使用

FormData

javascript对象。数据到达服务器，但我不知道如何格式化它

这是我的AJAX函数：

function saveMenu(id){
    var formElement = document.getElementById("menu-form");
    var formData = new FormData(formElement);
    formData.append('_method', 'PUT');
    $( "#form-wrapper" ).toggleClass( "be-loading-active" );
    $.ajax({
        type: 'PUT',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: "{{url('myUrl')}}",
        data: formData,
        enctype: 'multipart/form-data',
        processData: false,
        success: function(response) {
            toastr.success('Yai! Saved successfully!')
        },
        error: function(response) {
            toastr.error('Oh oh! Something went really wrong!')
        },
        complete: function() {
            $( "#form-wrapper" ).toggleClass( "be-loading-active" )
        }
    });
}

当我执行

dd（$request->all（））时在我的控制器中，我得到如下内容：
array:1 [
  "------WebKitFormBoundaryRCIAg1VylATQGx46\r\nContent-Disposition:_form-data;_name" => """
    "_token"\r\n
    \r\n
    jtv4bnn8WQnP3eqmKZV3xWka2YOpnNc1pgrIfk0D\r\n
    ------WebKitFormBoundaryRCIAg1VylATQGx46\r\n
    Content-Disposition: form-data; name="blocks[43][title]"\r\n
    \r\n
...

我尝试过的事情：

将HTTP谓词设置为POST。同样的结果
设置AJAXcontentType:false
，contentType:application/json
。空洞的回答
删除enctype:“多部分/表单数据”
。同样的回答

非常感谢您的帮助。
我已经试着调试了两个小时，发现方法PUT不能正确处理formData
试着改变
type : "PUT" 

进入
然后将后端的方法从put
更改为post，您将看到不同之处。
我用下面的代码来测试它
$("#menu-form").submit(function (){
    var fd = new FormData();
    fd.append('section', 'general');
    fd.append('action', 'previewImg');
    fd.append('new_image', $('.new_image')[0].files[0]); 
    $.ajax({
        method : 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token()}}'
        },
        url: "{{url('upload-now')}}",
        data : fd,
        contentType: false,
        processData: false,
        success: function(response) {
            console.log(response);
        },
    });
    return false;
});

在我的控制器里
public function test(Request $request){
    dd($request->all());
}

我将尝试进一步研究这个问题。
我已经试着调试了两个小时，发现方法PUT不能正确处理formData
试着改变
type : "PUT" 

进入
然后将后端的方法从put
更改为post，您将看到不同之处。
我用下面的代码来测试它
$("#menu-form").submit(function (){
    var fd = new FormData();
    fd.append('section', 'general');
    fd.append('action', 'previewImg');
    fd.append('new_image', $('.new_image')[0].files[0]); 
    $.ajax({
        method : 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token()}}'
        },
        url: "{{url('upload-now')}}",
        data : fd,
        contentType: false,
        processData: false,
        success: function(response) {
            console.log(response);
        },
    });
    return false;
});

在我的控制器里
public function test(Request $request){
    dd($request->all());
}

我将尝试更多地研究这个问题。
最后，我放弃了让它工作的尝试，尝试了一种更普通的方法，我仍然不知道为什么请求的格式是这样的，但是XMLHttpRequest（）
函数工作得很好，迁移也不是什么大问题
与我发布的功能相当的功能是：
function saveMenu(action){
    var formElement = document.getElementById("menu-form");
    var formData = new FormData(formElement);
    formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

    var request = new XMLHttpRequest();
    request.open("POST", "{{url('myUrl')}}");
    request.send(formData);

    request.onload = function(oEvent) {
      if (request.status == 200) {
        toastr.success('Yai! Saved successfully!');
      } else {
        toastr.error('Oh oh! Something went really wrong!');
      }
      $( "#form-wrapper" ).toggleClass( "be-loading-active" );
    };
}

最后，我放弃了让它工作的尝试，尝试了一种更普通的方法，我仍然不知道为什么请求的格式是这样的，但是XMLHttpRequest（）
函数工作得很好，迁移也不是什么大问题
与我发布的功能相当的功能是：
function saveMenu(action){
    var formElement = document.getElementById("menu-form");
    var formData = new FormData(formElement);
    formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

    var request = new XMLHttpRequest();
    request.open("POST", "{{url('myUrl')}}");
    request.send(formData);

    request.onload = function(oEvent) {
      if (request.status == 200) {
        toastr.success('Yai! Saved successfully!');
      } else {
        toastr.error('Oh oh! Something went really wrong!');
      }
      $( "#form-wrapper" ).toggleClass( "be-loading-active" );
    };
}

这个给我修好了
data: form_data,
contentType: false,
processData: false,

processData:false
防止jQuery解析数据并抛出非法调用错误。JQuery在遇到表单中的文件并且无法将其转换为字符串（序列化）时执行此操作
contentType:false
阻止ajax发送内容类型头。内容类型标头使Laravel handel将FormData对象作为某种序列化字符串
将两者都设置为false使其对我有效。
我希望这有帮助
$('#my-form').submit(function(e) {
        e.preventDefault();
        var api_token = $('meta[name="api-token"]').attr('content');
        form_data = new FormData(this);
        $.ajax({
            type: 'POST',
            url: '/api/v1/item/add',
            headers: {
                Authorization: 'Bearer ' + api_token
            },
            data: form_data,
            contentType: false,
            processData: false,
            success: function(result,status,xhr) {
                console.log(result);
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });
    });

还要记住使用$request->all（）
$request->input（）
data: form_data,
contentType: false,
processData: false,

processData:false
防止jQuery解析数据并抛出非法调用错误。JQuery在遇到表单中的文件并且无法将其转换为字符串（序列化）时执行此操作
contentType:false
阻止ajax发送内容类型头。内容类型标头使Laravel handel将FormData对象作为某种序列化字符串
将两者都设置为false使其对我有效。
我希望这有帮助
$('#my-form').submit(function(e) {
        e.preventDefault();
        var api_token = $('meta[name="api-token"]').attr('content');
        form_data = new FormData(this);
        $.ajax({
            type: 'POST',
            url: '/api/v1/item/add',
            headers: {
                Authorization: 'Bearer ' + api_token
            },
            data: form_data,
            contentType: false,
            processData: false,
            success: function(result,status,xhr) {
                console.log(result);
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });
    });

还要记住使用$request->all（）
$request->input（）排除文件，
如果使用ajax中的方法，您可以按照
1.将方法方法：'PUT'
更改为方法：'POST'
2.添加formdata.append和_方法，如下例所示：
$('#updateBtn').click(function(e){
    e.preventDefault();
    var frm = $('#tambahForm');
    frm.trigger("reset");
    $('.edit_errorNama_kategori').hide();
    $('.edit_errorGambar').hide();
    var url = "/pengurus/category/"+$('#edit_id').val();
    var formdata = new FormData($("#editForm")[0]);
    formdata.append('_method', 'PUT');  //*** here

    $.ajax({                       
        method :'POST', //*** here
        url : url,
        data : formdata,
        dataType : 'json',
        processData: false,
        contentType: false,
        success:function(data){
          if (data.errors) {
            if (data.errors.nama_kategori) {
                $('.edit_errorNama_kategori').show();
                $('.edit_errorNama_kategori').text(data.errors.nama_kategori);
            }
            if (data.errors.gambar){
              $('.edit_errorGambar').show();
              $('.edit_errorGambar').text(data.errors.gambar);
            }
          }else {
            frm.trigger('reset');
            $('#editModal').modal('hide');
            swal('Success!','Data Updated Successfully','success');
            table.ajax.reload(null,false);
          }
        },
        error: function (jqXHR, textStatus, errorThrown) {
          alert('Please Reload to read Ajax');
          console.log("ERROR : ", e);
        }
    });
});

它对我很有用Laravel 7，
如果使用ajax中的方法，您可以按照
1.将方法方法：'PUT'
更改为方法：'POST'
2.添加formdata.append和_方法，如下例所示：
$('#updateBtn').click(function(e){
    e.preventDefault();
    var frm = $('#tambahForm');
    frm.trigger("reset");
    $('.edit_errorNama_kategori').hide();
    $('.edit_errorGambar').hide();
    var url = "/pengurus/category/"+$('#edit_id').val();
    var formdata = new FormData($("#editForm")[0]);
    formdata.append('_method', 'PUT');  //*** here

    $.ajax({                       
        method :'POST', //*** here
        url : url,
        data : formdata,
        dataType : 'json',
        processData: false,
        contentType: false,
        success:function(data){
          if (data.errors) {
            if (data.errors.nama_kategori) {
                $('.edit_errorNama_kategori').show();
                $('.edit_errorNama_kategori').text(data.errors.nama_kategori);
            }
            if (data.errors.gambar){
              $('.edit_errorGambar').show();
              $('.edit_errorGambar').text(data.errors.gambar);
            }
          }else {
            frm.trigger('reset');
            $('#editModal').modal('hide');
            swal('Success!','Data Updated Successfully','success');
            table.ajax.reload(null,false);
          }
        },
        error: function (jqXHR, textStatus, errorThrown) {
          alert('Please Reload to read Ajax');
          console.log("ERROR : ", e);
        }
    });
});

它对我来说起作用有点晚，但是；
这会解决你的问题
var formData = new FormData(document.getElementById('form'));
console.log(...formData);

var object = {};
formData.forEach(function (value, key) {
    object[key] = value;
});

然后您可以将此对象
发送到服务器。这是更具可读性和伟大的作品
或
你可以直接发送这个
JSON.stringify(Object.fromEntries(formData));

这是较新的方法。
不要放弃：-）有点晚了，但是；
这会解决你的问题
var formData = new FormData(document.getElementById('form'));
console.log(...formData);

var object = {};
formData.forEach(function (value, key) {
    object[key] = value;
});

然后您可以将此对象
发送到服务器。这是更具可读性和伟大的作品
或
你可以直接发送这个
JSON.stringify(Object.fromEntries(formData));

这是较新的方法。
不要放弃：-）
嗯。。我会试着替我做一个可行的例子。您是否尝试了此dd（$request->_方法）？@RomnickSusa是的，它返回null。您是否在删除nctype:'multipart/form data
后删除了js缓存，因为我认为是这样key@ThomasMoors在我的例子中，它看起来是一样的。如果您没有使用1.9.0之前的jQuery版本，你应该把'type'PUT'改为'method'PUT'`Hmm。。我会试着替我做一个可行的例子。您是否尝试了此dd（$request->_方法）？@RomnickSusa是的，它返回null。您是否在删除nctype:'multipart/form data
后删除了js缓存，因为我认为是这样key@ThomasMoors在我的例子中，它看起来是一样的。如果您没有使用1.9.0之前的jQuery版本，您应该将'type:'PUT'更改为'method:'PUT'`对不起，我的表单比您可以轻松附加的3个输入更复杂，它有多个级别和更多文件。不管怎样，正如我在问题中所说的，我已经尝试更改为POST方法，但我没有改变。我会在以后修改我的答案。我有一个解决方案，但我讨论了jquery ajax函数，支持XMLRequest（）
抱歉，但我的表单比您可以轻松附加的3个输入更复杂，它有多个级别和更多的文件。不管怎样，正如我在问题中所说，我已经尝试更改为POST方法，但它没有为我更改。我将在以后修改我的答案我有了一个解决方案，但我讨论了jquery ajax函数，支持XMLRequest（）