Изменения в html без обновления (проблема ajax)

У меня проблема или я не понимаю, как работает ajax.

Я хочу после нажатия на кнопку добавить пользователя в колонку likes в datatable, а затем передать переменные в json снова в ajax, который один изменить элементы в html файле. Все это без обновления. Я застрял. Ajax работает с добавлением, удалением пользователя, но не знаю, как вернуть json и изменить элементы в html.

urls.py

urlpatterns = [
    path('',views.logout_view, name = 'logout'),
    path('like/<int:pk>', views.commLike, name="comm_like"),
]

views.py

@login_required
def commLike(request, pk):
    comm_id = request.POST.get('comm_id')
    comm = Comment.objects.get(comment_id=comm_id)
    user_name = request.POST.get('user')
    user_email = request.POST.get('email')
    profile = User.objects.get(email=user_email

)
    if not User.objects.get(email=user_email):
       User.objects.create(email=user_email,name=user_name)
    if profile in comm.likes.all():
        comm.likes.remove(profile)
        is_liked = False
    else:
        comm.likes.add(profile)
        is_liked = True
    response = {}
    response['is_liked'] = is_liked
    response['total_likes'] = comm.total_likes()
    # response_data[is_liked,comm.total_likes()]
    # return render(request, 'show_post.html', { 'is_liked': is_liked, 'total_likes': comm.total_likes()})
    return JsonResponse(response)

show.html

 <form action= "{% url 'comm_like' pk=cs.comment_id %}" id=like-butt class="like-button" method="post" >
                            {% csrf_token %}
                            <input type="hidden" name="user" value="{{user}}">
                            <input type="hidden" name="email" value="{{user.email}}">
                            <input type="hidden" name="comm_id" value="{{ cs.comment_id }}">
                            <button type="submit"  id='comm_like' value="{{ cs.comment_id }}" class="comment-rating">
                                 <img src="/static/img/thumb_up.png" style="height:2rem;width:2rem;">
                            </button>
                      </form>

script.js

$('#like-butt').on('submit',function(e){
        e.preventDefault();
        console.log("form submitted!")
        comm_like();
        });


function comm_like() {
       console.log("create post is working!");
       const email =  $('input[name="email"]').val();
       const user = $('input[name="user"]').val();
       const comm_id = $('input[name="comm_id"]').val();
       console.log(user);
       console.log(email);
       console.log(comm_id);
       $.ajax({
          url : '{% url "comm_like" %}',
          type:  "GET",
          data : {
             csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
             email : email,
             user : user,
             comm_id : comm_id
          },
          success: function(response) {
               var response = JSON.parse(response);

               if (response.is_liked === false) {
                  $('.like-btn').html('<button><i><img src="/static/img/thumb_up_fill.png" style="height:2rem;width:2rem;display: inline-block;"></i></button>');
               } else{
                 $('.like-btn').html('<button><i><img src="/static/img/thumb_up.png" style="height:2rem;width:2rem;display: inline-block;"></i></button>');
               }
                },

       })


       };

Я пробовал с "GET", но все равно сайт просто открывает json со значениями. Я застрял, и вся информация на youtube или где-либо еще не работает. Должен ли я сделать два вида и отдельный ajax с типом: 'Get', который изменяет элементы. Я больше не знаю...

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