Система «Мне нравится» с использованием Laravel, Ajax и jQuery
У меня нет знаний об Ajax в сочетании с Laravel. Я пытаюсь построить подобную систему, она уже настроена. Проблема в; когда вы нажимаете на кнопку «Мне нравится», вся страница обновляется. Но я хочу, чтобы это было динамично. Для этого мне нужно использовать Ajax и jQuery.
Я пытался создать функцию jQuery, но не знаю, как анализировать {id}
Не могли бы вы показать мне, где я могу узнать больше об этой теме? Может быть, учебник или не могли бы вы объяснить мне, что мне не хватает.
$('.like').on('click', function(event) {
console.info("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();
}
Ответы 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
}
})
Этот URL-адрес нуждается в кавычках, а {id} неверен, см. другие ответы для правильного формата.
ага я этого не заметил
Вы можете передавать данные в свои функции ajax, такие как data: {id: yourid, name: somename}, а также вы можете назначать значения переменных laravel для js следующим образом:
var testId = '{{$yourid}}'
Таким образом, в вашем случае вы можете сделать URL-адрес, например, testId + '/ addlike', а также всегда указывать идентификатор или другую динамическую вещь в конце, например 'addlike/' + testId.
$('.like').on('click', function(event) {
console.info("clicked the button");
var id = '{{$yourId}}'
$.ajax({
method: 'POST',
url: id + '/addlike'
})
});
Надеюсь, поможет
Обратите внимание, что это будет работать только в том случае, если код OP находится внутри шаблона блейда. Это не сработает, если код находится в отдельном файле JavaScript.
Здравствуйте, спасибо, что нашли время, чтобы ответить. К сожалению, это не работает. «Изображения» применяются в a для каждого. Таким образом, вне цикла foreach он не знает, что такое уникальный идентификатор. Отдельный файл Javascript также не позволяет системе узнать, что такое {{$yourID}}. Но спасибо, что подумали со мной.
Логика JavaScript, которую вам нужно вернуть false, чтобы она прекратила перенаправление. см. код ниже.
$('.like').on('click', function(event) {
console.info("clicked the button");
var id = '{{$yourId}}'
$.ajax({
method: 'POST',
url: id + '/addlike'
});
return false;
});
Контроллер должен быть возвращен, как показано ниже.
return response()->json(['success' => 'Liked'],200);
Удалить 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.info('error');
}
}
});
Я надеюсь, что это помогает.