Функция JQuery Ajax success не может получить доступ к Django View jsonresponse из представления

Мой взгляд

class MusicianLikesView(DetailView):
    model = Musician
    template_name = "guitar_blog/blog_detail.html"

    def post(self, request, **kwargs):
        song = self.get_object()
        user_id = request.user.id
        user_username = request.user.username

        if request.user.is_authenticated:
            if "Like1" in request.POST and user_username not in song.music_1_users.keys():
                song.music_1_votes += 1
                song.music_1_users[user_username] = user_id
                song.save()
                return JsonResponse({"likes": song.music_1_votes})

            elif "Unlike1" in request.POST and user_username in song.music_1_users.keys():
                song.music_1_votes -= 1
                song.music_1_users.pop(user_username)
                song.save()
                return JsonResponse({"likes": song.music_1_votes})

Мои урлы

path('ajax/', MusicianLikesView.as_view(), name="song_likes"),

Мой шаблон

<form method="post" class="voting-setup top_song">
          {% csrf_token %} {% if user.get_username in musician.music_1_users %}
          <button name="Unlike1" type="submit" class="like-button">
            <i class="fa-solid fa-guitar icon"
              ><span class="like-text">Unlike</span></i
            >
          </button>
          {% else %}
          <button name="Like1" type="submit" class="like-button">
            <i class="fa-solid fa-guitar icon"
              ><span class="like-text">Like</span></i
            >
          </button>
          {% endif %}
        </form>
        <span class="after-like first_song_likes">Liked {{ musician.music_1_votes }}</span>

Мой файл Javascript

$(document).on("submit", ".top_song", function (event) {
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "ajax/",
        data: {
            csrfmiddlewaretoken: "{{ csrf_token }}",
        },
        success: function (response) {
            console.log(response);
        },
        error: function (re) {
            console.log(re);
        }
    });
});

Моя ошибка в консоли

POST http://127.0.0.1:8000/guitar_blog/20/ajax/ 404 (Not Found)

Мои изменения во взглядах

def musician_likes_view(request, pk):
    song = Musician.objects.get(pk=pk)
    user_id = request.user.id
    user_username = request.user.username

    if request.user.is_authenticated:
        if "Like1" in request.POST and user_username not in song.music_1_users.keys():
            song.music_1_votes += 1
            song.music_1_users[user_username] = user_id
            song.save()
            return HttpResponse(song.music_1_votes)

        elif "Unlike1" in request.POST and user_username in song.music_1_users.keys():
            song.music_1_votes -= 1
            song.music_1_users.pop(user_username)
            song.save()
            return HttpResponse(song.music_1_votes)

Мои изменения в URLS

path('ajax/', musician_likes_view, name="song_likes"),

Моя ошибка Вот ошибка, которую я получил в своей консоли

POST http://127.0.0.1:8000/guitar_blog/20/ajax/ 404 (Not Found)

Моя функция success в моем JavaScript файле не может получить доступ к JsonResponse или HttpResponse, она переходит в функцию Error Function. У меня нет данных для передачи в форму, кроме "csrf_token", так как это только для нажатия кнопки. Я обратился ко второму классу формы, который (".top_song") в javascript файле для отправки. Что я делаю не так?

Я решил свою проблему

Мой взгляд

class MusicianDetailView(DetailView):
    model = Musician
    template_name = "guitar_blog/blog_detail.html"

@login_required
def post_likes(request):
    song = Musician.objects.get(pk=int(request.POST.get("primary_key")))
    user_id = int(request.POST.get("user_id"))
    user_username = request.POST.get("username")

    if "Like1" in request.POST.get("button_name") and user_username not in song.music_1_users.keys():
        song.music_1_votes += 1
        song.music_1_users[user_username] = user_id
        song.save()
        return JsonResponse({"final": song.music_1_votes, "req_name": "Unlike1", "inner_text": "Unlike"})

    elif "Unlike1" in request.POST.get("button_name") and user_username in song.music_1_users.keys():
        song.music_1_votes -= 1
        song.music_1_users.pop(user_username)
        song.save()
        return JsonResponse({"final": song.music_1_votes, "req_name": "Like1", "inner_text": "Like"})

Мой URL

path('likes/', post_likes, name="post_likes"),

Мой шаблон

<form method="post" class="voting-setup" id="top-song-form">
          {% csrf_token %}
          <input type="hidden" class="username" value="{{ user.get_username }}">
          <input type="hidden" class="user_id" value="{{ user.id }}">
          <input type="hidden" class="user" value="{{ user }}">
          <input type="hidden" class="primary-key" value={{ musician.pk }}>
          {% if user.get_username in musician.music_1_users %}
          <button name="Unlike1" type="button" class="like-button top-song-button">
            <i class="fa-solid fa-guitar icon"
              ><span class="like-text top-button-inside-text">Unlike</span></i
            >
          </button>
          {% else %}
          <button name="Like1" type="button" class="like-button top-song-button">
            <i class="fa-solid fa-guitar icon"
              ><span class="like-text top-button-inside-text">Like</span></i
            >
          </button>
          {% endif %}
          <span class="after-like" id="top-song-vote-count">Liked {{ musician.music_1_votes }}</span>
        </form>

Мой JS файл

$(".top-song-button").click(function (e) {
    let data = {
        "username": $(".username").val(),
        "user_id": $(".user_id").val(),
        "button_name": $(".top-song-button").attr("name"),
        "primary_key": $(".primary-key").val(),
        "user_set": $(".user").val(),
        "csrfmiddlewaretoken": $("#top-song-form").serialize().split("=")[1],
    }
    e.preventDefault();
    $.post('/likes/', data,
        function (response) {
            $("#top-song-vote-count").text("Liked " + response["final"]);
            let my_button_text = document.querySelector(".top-button-inside-text");
            let my_button = document.querySelector(".top-song-button");
            my_button.name = response["req_name"];
            my_button_text.innerText = response["inner_text"];
        },
        "json"
    );
    console.log(data);

});

Да, @shourav, вы правы насчет ошибки с csrf_token, но я сделал это по-другому, поскольку я просто передавал "csrf_token" через форму, поэтому сериализация получала только "csrf token". Также я сделал чертовски много изменений в этом ответе. Но все равно спасибо за помощь @shourav .

Вернуться на верх