Laravel 5에서 아약스 요청시 경로 리디렉션

Question

같은 버튼에 ajax 기능을 추가하려고합니다.

좋아요 버튼을 클릭하면 json 데이터가있는 페이지로 리디렉션된다는 점을 제외하면 모든 기능이 작동합니다.

나는 e.preventDefault()을 사용하고 있으며 여전히 나를 리디렉션하고 있습니다.

on('click')을 사용하는 경우 토큰과 함께 숨겨진 입력을 포함하더라도 콘솔 로그에 TokenMismatch 오류가 표시됩니다.

jquery.min.js : 4 POST http://localhost/socialnet/public/likeStatus 500 (내부 서버 오류)

내가 on('submit')를 사용하는 경우 데이터가 통과하지만 JSON 응답을 가진 페이지로 리디렉션.

이 내 컨트롤러에 FeedController@likeStatus()

public function likeStatus() { 

    if (Input::has('like_status')) { 
     $status = Input::get('like_status'); 
     $selectedStatus = Status::find($status); 

     $selectedStatus->likes()->create([ 
      'user_id' => Auth::user()->id, 
      'status_id' => $status 
     ]); 

     $response = array(
      'status' => 'success', 
      'msg' => 'You have liked this status', 
     ); 

     return Response::json($response); 
    } 
} 

뷰

{!! Form::open(['action' => 'FeedController@likeStatus', 'id' => 'like_form']) !!} 
    {!! Form::hidden('like_status', $status->id) !!} 
    {!! Form::hidden('user_id', Auth::user()->id) !!} 
    <button type="submit" name="likeStatus" class="btn btn-info btn-xs" id="like-status"> 
      <i class="fa fa-thumbs-up"></i> Like ({{ $likes_count }}) 
    </button> 
{!! Form::close() !!} 

자바 스크립트

$('#like-status').on('click', function(e){ 
    e.preventDefault(); 

    var status_id = $('input[name=like_status]').val(); 
    var user_id = $('input[name=user_id]').val(); 

    $.ajaxSetup({ 
     headers: { 
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').val() 
     } 
    }); 

    $.ajax({ 
     url: 'http://localhost/socialnet/public/likeStatus', 
     method: 'post', 
     data: {status_id: status_id, user_id: user_id}, 
     success: function(data) { 
      console.log(data.msg); 
     } 
    }); 
}); 

편집 :은 그냥 CSRF가 변수로 토큰 및 추가 추가 그것을에

var status_id = $('input[name=like_status]').val(); 
    var user_id = $('input[name=user_id]').val(); 
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content'); 

    $.ajax({ 
     url: 'http://localhost/socialnet/public/likeStatus', 
     method: 'post', 
     data: {status_id: status_id, user_id: user_id, _token: CSRF_TOKEN}, 
     success: function(data) { 
      console.log(data.msg); 
     } 
    }); 

이 네트워크 탭에서 Status Code: 200을 제공하지만, 콘솔 undefined를 제공하고 데이터가 겪고되지 않습니다.

편집 2 : 뭔가 이상한 일이 일어나고 있습니다. 나는 최신 상태를 원할 때 콘솔에 undefined을 얻습니다. 아무 일도 일어나지 않습니다. 하지만 이전 (이전) 상태를 좋아할 때 작동하지만 좋아하는 버튼을 클릭하면 json 데이터 페이지로 리디렉션되고 데이터가 전달됩니다.

내가 뭘 잘못하고 있니?

Answer 1

를 호출되고 있는지 확인하기 위해 전화를 제출 jQuery로 경고와 디버깅 너무

$('#like-button').live("click",function(){ }) 

시도 라이브 기능을 시도 할 수 귀하 PHP 코드, like_status를 찾습니다.

,

if (Input::has('like_status')) 

하지만 당신은

{ 
status_id: status_id, 
user_id: user_id 
} 

찾을 수없는 like_status가 없습니다를 보낼 수 있습니다. Input :: has ... false를 반환합니다. 코드가 본질적으로

public function likeStatus() { 

    if (Input::has('like_status')) { //It's always false 
    // 
    } 
    return undefined; 
} 

Answer 2

리디렉션의 기본 동작을 올바르게 방지 할 수있는 방법으로 .on('submit')을 사용해야합니다.

그 자체로 클릭 이벤트를 취소하려고 시도하고 있습니다 (#like-status).

당신의 jQuery 함수의 시작인지 확인 :

$('#like_form').on('submit', ... 

그냥 이벤트 핸들러가 올바르게 바인딩받을 수 있도록 별도의 안전을 위해 당신은 또한 아래 $(document).ready 내에서 결합한다 :

$(document).ready(function() { 

    $('#like_form').on('submit', ... 

} 

Answer 3

당신은 성공 AJAX 기능이 라인을 추가 할 필요가

var new_data = JSON.parse(data); 

요청에서 오는 데이터를 디코딩하려면

Answer 4

즉, 아약스 호출이 전혀 작동하지 않는다는 것을 의미합니다. 브라우저에서 javascript가 활성화되어 있고 jquery가 포함되어 있는지 확인한 다음 버튼 유형을 버튼으로 변경하려고 시도합니다. 버튼이 생성되는 경우, 동적으로 함수가 문제가에 있다고 것 같다