Laravel 5.4はFormDataを解析できませんJavery Ajaxを使用してJavascriptオブジェクトを送信

Question

最近、運がない問題を解決しようとしています。基本的にAJAXを使用してフォームをサーバーに送信しようとしています。私はFormData JQuery 1.12の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に設定します。同じ結果。
• AJAX contentType: false,contentType: application/jsonを設定します。空の応答。
• enctype: 'multipart/form-data'を削除します。同じ応答。

何か助けていただければ幸いです。

Answer 1

最後に、私はそれを動作させるためにしようとあきらめ、よりバニラのアプローチを試みたが、私はまだ要求がそのようにフォーマットされている理由を知らないが、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"); 
      }; 
} 

Answer 2

私は2時間デバッグしようとしていましたが、そのメソッドPUTがformDataで正しく動作していないことがわかりました。

はその後postにputからバックエンドにあなたの方法を変更し、あなたは違いが表示されます

method : "POST" 

に

type : "PUT" 

を変更してみてください。 私は病気がこの問題の詳細を調査してみ

$("#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()); 
} 

それをテストするためのコードの下に使用。

Answer 3

これは私のためにそれを固定

data: form_data, 
contentType: false, 
processData: false, 

processData: falseは、データを解析し、不正な呼び出しエラーを投げてからjQueryのを防ぐことができます。 JQueryは、フォーム内のファイルに遭遇し、それを文字列に変換できない（シリアル化する）ときにこれを行います。

contentType: falseは、コンテンツタイプヘッダーを送信するajaxを防ぎます。コンテンツタイプヘッダーは、Laravelに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()を使用することを忘れないでください...うーん、私の場所で実行可能なインスタンスを作るために病気を試してファイル