2016-07-23 17 views
1

laravelに合うように調整されたサーバーにAjax経由で簡単にデータを送信するためのカスタムJqueryプラグインを作成しましたが、データを送信できません。 laravelサーバーに送信されたものを確認するためにdd($ request-> all())を使用すると、何も送信していないことを意味する空の配列がコンソールに表示されます。以下は、私は私のJSは、サーバーへの上に自分のデータを送信していないと思いますが、なぜわからないイムLaravel:ajax経由でデータが送信されない

JS

(function($){ 
    'use strict' 

    $.fn.lajax=function(options){ 


     //overwrite options 
     var optns=$.extend({ 
      dataType: 'json', 
      debug:false, 
      processData: true, 
      headers:{ 
       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
      }, 
      acceptedInputFile:'/*/', 

      //functions that are very similar to the ajax optns but differ a little 
      //as the paramters give easy access to the ajax form element 
      lajaxBeforeSend: function(form,formData,jqXHR,settings){}, 
      lajaxSuccess: function(form,formData,data,textStatus,jqXHR){}, 
      lajaxError: function(form,formData,jqXHR,textStatus,errorThrown){}, 
     },options); 



     //loop through every form, 'this' refers to the jquery object (which should be a list of from elements) 
     this.each(function(index,el){ 

      $(el).submit(function(e){ 
       //prevent submission 
       e.preventDefault(); 

       //form jquery instance & form data 
       var $form=$(this); 
       var formData = new FormData($form[0]); 

       //catch url where the ajax function is supposed to go 
       var url=$form.attr('action'); 

       //check if REST based method is assigned 
       if($form.find('input[name="_method"]').length) 
       { 
        var method=$(this).find(':input[name="_method"]').val().toUpperCase(); 
        if(optns.debug) 
         console.log("'"+method+"' method registered for form submission"); 
       } 
       //If no REST method is assigned, then check method attr 
       else if($form.attr('method')) 
       { 
        var method=$form.attr('method').toUpperCase(); 
        if(optns.debug) 
         console.log("'"+method+"' method registered for form submission"); 
       } 
       //method is not assigned 
       else 
       { 
        var method='GET'; 
        if(optns.debug) 
         console.log('The form that submitted has no method type assigned. GET method will be assigned as default'); 
       } 



       //object that will be fed into jquerys ajax method 
       var ajax_options={ 
        url: url, 
        method: method, 
        beforeSend: function(jqXHR,settings){ 
         console.log(jqXHR); 
         console.log(settings); 
         if(optns.debug) 
          console.log('executing beforeSend function'); 
         optns.lajaxBeforeSend($form,formData,jqXHR,settings); 
        }, 
        success: function(data,textStatus,jqXHR){ 
         if(optns.debug) 
          console.log('executing success function'); 
         optns.lajaxSuccess($form,formData,data,textStatus,jqXHR) 
        }, 
        error: function(jqXHR,textStatus,errorThrown){ 
         if(optns.debug) 
          console.log('error encountered. ajax error function procked'); 
         optns.lajaxError($form,formData,jqXHR,textStatus,errorThrown); 

         var errors = jqXHR.responseJSON; 
         console.log(errors); 
        }, 
       } 

       //check if files are included in the submitted form if the method is not GET 
       if($form.find('input:file').length && method!='GET'){ 
        ajax_options.processData=false; 
        ajax_options.contentType=false; 
        ajax_options.cache=false; 
        ajax_options.data=formData; 
       } 


       if(optns.debug) 
        console.log('About to send ajax request'); 

       //sending request here 
       $.ajax(ajax_options); 

       if(optns.debug) 
        console.log('finished with form '+$form+'. Looping to next form if exists'); 

       return false; 
      }); 

     }); 

     return this; 
    } 

}(jQuery)); 

HTML

<form class="lajax" action="{{ action('[email protected]') }}" method="POST" enctype="multipart/form-data"> 
       <div class="form-group"> 
        <label>Album Name</label> 
        <input type="text" name="name" class="form-control">             
       </div> 

       <div class="form-group"> 
        <label for="coverFile">Album Cover Image</label> 
        <input name="cover" type="file" id="coverFile"> 
        <p class="help-block">Example block-level help text here.</p> 
       </div> 

       <div class="form-group"> 
        <label for="albumFiles">Album Images</label> 
        <input type="file" name="photos[]" multiple> 
       </div> 

       <button type="submit" class="btn btn-primary">Create Album</button> 
      </form> 

私のコードです。

+0

任意のコンソールエラーを指して、あなたのルート・ファイル内のポストルートを定義しましたが助けてください? – ClearBoth

+0

コンソールのエラーなし – alaboudi

答えて

0

あなたは正確に[email protected]コントローラメソッド

+0

はい私はそれを私のアルバムコントローラのストアメソッドに正しくルーティングしました。それはあまりにも応答を提供しています!問題は、機能に送信されている私の要求で、コントローラに情報を送信していないということです。それは、その空の配列 – alaboudi

+0

は、サーバーに送信されているかどうか、dd($ request-> all())を印刷しようとすると、送信されているかどうかをチェックしました –

関連する問題