Переадресация формы на маршрут по запросу ajax в Laravel 5

Question

Я пытаюсь добавить функцию ajax к подобной кнопке.

Все работает, за исключением того, что я переадресовываюсь на страницу с данными json после того, как я нажимаю кнопку типа.

Я использую e.preventDefault(), и он все еще перенаправляет меня.

Если я использую on('click'), я получаю ошибку в журнале консоли, хотя я включил скрытый ввод с токеном.

jquery.min.js: 4 POST http://localhost/socialnet/public/likeStatus 500 (Internal Server Error)

Если я использую 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() !!} 

Javascript

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

EDIT: Я просто добавил CSRF токен в переменную и добавил до data

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 в консоли и никаких данных не проходят.

EDIT 2: Что-то очень странное происходит. Я получаю undefined в консоли, когда я стараюсь, как новый статус, и ничего не происходит. Но он работает, когда мне нравится предыдущий (старый) статус, однако, когда я нажимаю подобную кнопку, я перенаправляюсь на страницу данных json, и данные проходят.

Что я делаю неправильно?

Answer 1

кажется, что проблема заключается в вашем PHP-код, он ищет like_status с

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

но отправить

{ 
status_id: status_id, 
user_id: user_id 
} 

Там нет like_status найти. Ввод :: имеет ... возвращает false. Ваш код по существу превращается в

public function likeStatus() { 

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

Answer 2

Вы должны использовать .on('submit') таким образом, чтобы вы могли правильно предотвратить перенаправление формы по умолчанию.

Как показано на рисунке, вы пытаетесь отменить событие click на #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

Это означает, что ваш вызов ajax вообще не работает, сначала убедитесь, что в вашем браузере включен Javascript, а jquery включен, если он, а затем попробуйте изменить тип кнопки submit to button , если кнопка генерируется динамически, вы можете попробовать живую функцию слишком

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

пытаются отладить с предупреждения с JQuery представить вызов, чтобы убедиться, функция вызывается