AJAX звонит в Laravel - кнопка «Мне нравится»

Question

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

У меня есть статья с некоторыми кнопками следующим образом:

С помощью кнопки «Мне нравится» (сердце) я сделал следующее:

<!-- The individual items -->
<div class="interaction-item">
    <a href="{{ action('LikeController@likeArticle', $article->id) }}" class="interactor" role="button" tabindex="0">
        <div class="icon-block">
            <i class="fas fa-heart"></i>
        </div>
    </a>
</div>

Чтобы при нажатии на сердце оно вызывало мой LikeController с определенным методом.

LikeController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
use App\Like;
use App\Article;
use App\Event;
use Illuminate\Support\Facades\Auth;

class LikeController extends Controller
{
    /**
     * Display all liked content for this user
     */
    public function index()
    {
        $user = Auth::user();

        $articles = $user->likedArticles()->get();

        $articleCount = count($articles);

        return view('pages.likes.index', compact('articles', 'articleCount'));
    }

    /**
     * Handle the liking of an Article
     *
     * @param int $id
     * @return void
     */
    public function likeArticle($id)
    {
        // here you can check if product exists or is valid or whatever
        $this->handleLike(Article::class, $id);

        return redirect()->back();
    }

    /**
     * Handle the liking of an Event
     *
     * @param int $id
     * @return void
     */
    public function likeEvent($id)
    {
        // here you can check if product exists or is valid or whatever
        $this->handleLike(Post::class, $id);

        return redirect()->back();
    }

    /**
     * Handle a Like
     * First we check the existing Likes as well as the currently soft deleted likes.
     * If this Like doesn't exist, we create it using the given fields
     *
     *
     * @param [type] $type
     * @param [type] $id
     * @return void
     */
    public function handleLike($type, $id)
    {
        $existingLike = Like::withTrashed()
        ->whereLikeableType($type)
        ->whereLikeableId($id)
        ->whereUserUsername(Auth::user()->username)
        ->first();

        if (is_null($existingLike)) {
            // This user hasn't liked this thing so we add it
            Like::create([
                'user_username' => Auth::user()->username,
                'likeable_id'   => $id,
                'likeable_type' => $type,
            ]);
        } else {
            // As existingLike was not null we need to effectively un-like this thing
            if (is_null($existingLike->deleted_at)) {
                $existingLike->delete();
            } else {
                $existingLike->restore();
            }
        }
    }
}

Итак, по сути, вы нажимаете кнопку, лайк зарегистрирован, и страница обновляется.

Что мне действительно нравится, так это: когда кнопка нажата, запрос подтверждается, а затем ей назначается класс, делающий его темнее, как в Facebook, Twitter и т. П.

Яя не использую какой-либо фреймворк JavaScript, поэтому я подумал, что в будущем пойду с AJAX и добавлю фреймворк.

Чтобы сделать AJAX-вызов, который я знаю, начинается так:

$("button").click(function(){
    $.ajax({
        type: "GET",
        url: './likes/articles/' + id,
        data: "",
        success: function() {
            console.log("Simple example");
        }
    })
});

Так что я могу назвать маршрут с AJAX-запросом, ноНа ум приходят два вопроса.

1. PHP на стороне сервера, так как мне узнать идентификатор текущей статьи?В PHP я знаю, что вы могли бы сделать $id = $article->id, но было бы глупо полагать, что переменная PHP может использоваться в JavaScript.Однако я думал о url: 'article/likes/{{ $article->id }}',
2. Я знаю об успехе, я могу манипулировать DOM, но как я могу гарантировать, что кнопка остается нажатой?

Я изучаю больше, пока мы говорим, поэтому добавлю к этомувопрос на ходу.

Обновление

$( ".like" ).click(function() {
        $.ajax({
            url: '{{ action("LikeController@likeArticle", $article->id) }}',
            type: 'GET',
            date: "",
            success: function (result) {

            },
            error: function (result) {

            }
        });  
    });

    </script>

Это успешно вызывает маршрут, но мне все еще нужно нажать кнопку.

Answer 1

Сначала подумайте о том, как генерируется ваше мнение.PHP сначала выведет все переменные и любые маршруты, которые у вас есть, и отправит ответ со ВСЕМИ переменными, уже находящимися внутри представления.

После этого, когда пользователь находится в представлении, у вашей привязки уже будет URLтебе нужно.Поэтому вам нужно всего лишь сделать что-то вроде этого:

$(".interactor").click(function(e){
    e.preventDefault();// you dont want your anchor to redirect so prevent it
    $.ajax({
        type: "GET",
        // blade.php already loaded with contents we need, so we just need to
        // select the anchor attribute href with js.
        url: $('.interactor').attr('href'),
        success: function() {
           console.log("Simple example");
        }
    })
});

Как вы видите, имейте в виду, что использование php & js вместе, как вы пытались, очень странно