How to get and display data from database without refresh page using ajax and django

I want to get and display data from database to my page using django and ajax. This is my view :

def getMessages(request, sender_id, receiver_id):
    if request.user.profile == 'A':
        chat = Chat.objects.filter(Q(sender_id=sender_id) | Q(receiver_id=sender_id)).all()
    elif request.user.profile == 'C':
        chat = Chat.objects.filter(Q(sender_id=sender_id,receiver_id=receiver_id) | Q(sender_id=receiver_id,receiver_id=sender_id))
    return JsonResponse({"chat":list(chat.values())})

And This is my javascript:

$(document).ready(function(){
    
        setInterval(function(){
            $.ajax({
                type: 'GET',
                url : "{% url 'getMessages/{{request.user.id}}/to/{{receiver_user.id}}'}",
                success: function(response){
                    console.log(response);
                    $("#display").empty();
                    for (var key in response.chat)
                    {
                        var temp='<div class="msg-box {% if request.user == msg.sender %} right {% else %} left {% endif %}"><div class="details"><p class="msg">{{ msg.message }}</p><p class="date">{{ msg.msg_time }}</p></div></div>';
                        $("#display").append(temp);
                    }
                },
                error: function(response){
                    console.log('An error occured')
                }
            });
        },1000);
    });

And this is my urls.py:

urlpatterns = [
    path('<int:sender_id>/to/<int:receiver_id>',views.chat),
    path('send/', views.send, name='send'),
    path('getMessages/<int:sender_id>/to/<int:receiver_id>', views.getMessages, name='getMessages'),
]

I try these codes but it doesn't work.

Back to Top