2016-07-23 4 views
1

laravel에 맞게 조정 된 서버로 Ajax를 통해 데이터를 쉽게 보낼 수 있도록 사용자 정의 Jquery 플러그인을 만들었지 만 데이터를 보낼 수 없습니다. dara ($ request-> all())를 사용하여 laravel 서버로 보낸 내용을 확인하면 콘솔에 빈 배열이 표시되는데 아무 것도 보내지 않았 음을 의미합니다. 아래는 내가 JS가 서버로 내 데이터를 전송하지 생각하지만 왜 확실하지 메신저Laravel : 아약스를 통해 데이터가 전송되지 않음

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())를 인쇄하려고 시도 할 수있는 데이터가 서버로 보내지는지, 무엇이 보내지고 있는지 보았다. –

관련 문제