Система «Мне нравится» с использованием Laravel, Ajax и jQuery

Question

У меня нет знаний об Ajax в сочетании с Laravel.Я пытаюсь создать подобную систему, она уже настроена.Проблема в;когда вы нажимаете кнопку «Мне нравится», вся страница обновляется.Но я хочу, чтобы это было динамично.Для этого мне нужно использовать Ajax и jQuery

Я пытался создать функцию jQuery, но я не знаю, как разобрать {id}

Не могли бы вы показать мне, где яможете узнать больше об этом предмете?Может быть, учебное пособие или не могли бы вы объяснить мне ту часть, которую я пропускаю.

$('.like').on('click', function(event) {
console.log("clicked the button");

$.ajax({
    method: 'POST',
    url: /{id}/addlike
  })
});

Это кнопка «Мне нравится»:

<form action="/{{$new->id}}/addlike" method="post">
                    @csrf
                    <button value="{{$new->likes}}" class='like' type="submit"><i class="fas fa-fire"></i></button>
</form>

Это дорога, похожая на:

Route::post('/{id}/addlike', 'ImageController@like');```

Это «похожий» контроллер

public function like($id)
{
    $picture = ImageModel::find($id)->increment('likes');

    return back();
}

Answer 1

Удалить type='submit' Он перенаправит вашу страницу, просто добавьте type="button", и в .like function() ajax должен выглядеть следующим образом, всегда применять условие if и else, если вы получаете какую-то ошибку, чтобы она отражалась на консоли вашего браузера.

$.ajax({                                                            
                type: "POST",                                                                                                                      
                url: Apiurl,
                data: {
                   "_token": "{{ csrf_token() }}",
                        "id": id
                  }
                success: function (data) 
                {
                    if(data.status ==  'success' )
                    {
                       //apply your condition 
                    }
                    else
                    {
                       console.log('error');                            
                    }                            
               } 
           });

Answer 2

Вы можете передавать данные в свои функции ajax, такие как data: {id: yourid, name: somename}, а также можете назначать значения переменных laravel для js следующим образом:

var testId = '{{$yourid}}'

Так что в вашем случае вы можете сделать URL-адрес как testId + '/ addlike', а также всегда делать id или другую динамическую вещь в конце, например, 'addlike /' + testId.

$('.like').on('click', function(event) {
console.log("clicked the button");

var id = '{{$yourId}}'

$.ajax({
    method: 'POST',
    url: id + '/addlike'
  })
});

Надеюсь, это поможет

Answer 3

JavaScript логика, которую вы должны вернуть false, поэтому он перестанет перенаправлять. см. ниже код

$('.like').on('click', function(event) {
    console.log("clicked the button");

    var id = '{{$yourId}}'

    $.ajax({
       method: 'POST',
       url: id + '/addlike'
    });

   return false;
});

Контроллер должен быть возвращен как показано ниже

return response()->json(['success' => 'Liked'],200);

Answer 4

Не добавлять

return back();

в вашем контроллере вместо этого вы можете использовать

return response()->json(['success' => 'Liked']);

или все, что вы хотите ввести, чтобы передать данные в ajax. Не помещайте действие в ваш пост, вместо этого вы можете использовать скрытый ввод, чтобы поместить свой идентификатор и вызвать его (если вы используете jquery)

$('input [name=nameofhidden]').val();

затем в ваш ajax добавьте успех и что вы хотите сделать после обновления данных.

var id = $('input[name=nameofhidden]').val();
$.ajax({
    method: 'POST',
    url: '/'+id+'/addlike',
    success: function(ifyouhavedata){
     //what you want to do
    }
  })