e.preventDefault()가 작동하지 않습니다. AJAX/Laravel 5.4

Question

백엔드에서 처리 할 사용자 양식 입력을 보내는 Ajax 호출이 있습니다. 백엔드의 컨트롤러는 JSON으로 결과를 되돌려 보냅니다. 양식을 제출하면 페이지가 다시로드되고 AJAX에 의해 json이 선택되는 대신 JSON이없는 빈 페이지로 리디렉션됩니다.

이 Ajax 호출입니다 : 검증은 사용자가 인증 된 경우는, JSON을 보내는 실패 할 경우

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('form').on('submit', '#topup-form', function(e){ 
     e.preventDefault(); 
      $.ajax({ 
       url: $('form').attr('action'), 
       method: 'post', 
       data: $('form').serialize(), 

       success: function(result){ 
        alert(result); 
       }, 

       error: function(errorData){ 
        alert(errorData); 
       } 
      }); 
     }); 
     $.ajaxSetup({ 
      headers: { 
       'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') 
      } 
     }) 
    }); 
</script> 

이는 Laravel 컨트롤러, 그것은 사용자를 리디렉션되고, 그렇지 않으면 로그인하는 사용자 요청 (401)를 반환 . 어떻게됩니까

public function topupPost(Request $request) { 
    $validator = [ 
    'topupAmount'=> 'required|integer|between:10,500', 
    'phonenumber'=> 'required|regex:/^05[602][0-9]{7}$/', 
    ]; 

    $inputs = $request->all(); 

    Log::info($inputs); 

    $validator = Validator::make($inputs, $validator); 

    if($validator->fails()){ 
     return Response::json([ 
      'error' => true, 
      'message' => $validator->messages(), 
      'code' => 400 
     ], 400); 
    } 

    elseif (Auth::check()) { 
     return view('pages.checkout', compact('inputs')); 
    } 

    return Response::json([ 
      'error' => true, 
      'message' => "Please login first", 
      'code' => 401 
     ], 401);  
} 

아무것도 경고로 팝업 없지만 사용자가 원시 JSON있는 페이지로 연결된다는 점이다.

Answer 1

나는 비슷한 문제에 봉착했습니다. 양식을 자동 제출하지 않도록 제출 단추 유형을 "단추"로 변경하여 해결했습니다. 내 아약스 코드는 아래와 같습니다 :

$(document).ready(function() { 
      $("#submit").click(function() { 
      var loginForm = $("#contactForm"); 
      var formData = loginForm.serialize(); 

       /*alert(formData);*/ 

       $.ajax({ 
        url: /*you URL*/, 
        type:'post', 
        data:formData, 
        success:function(data){ 
         //alert(data);  //for redirecting instead of alert try below code 

         if(data == "") {  //True Case i.e. passed validation 
          alert('error') 
         } 
         else {     //False Case: With error msg 
         alert(data); //$msg is the id of empty msg 
         } 

        }, 
        error: function (data) { 
         /*console.log(data);*/ 
         alert(data); 
        } 
       }); 

      }); 

     /*alert('Successfully Loaded');*/ 

     }); 

PHP 응답 핸들도 괜찮아 보입니다. 이게 도움이되기를 바랍니다.