Trying to call Django view using AJAX

Question

I want to call the Django view (mentioned below) using AJAX every one second to show all the messages in the room

My JQuery

<script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>

This is my JQuery code (on the browser console I keep getting an error saying $.ajax is not defined)

<script>
    $(document).ready(function(){
        setInterval(function(){
            $.ajax({
                type: 'GET',
                url : window.location.origin+"/room/{{room_name}}/"+username+"/",
                success: function(response){
                    console.log(JSON.stringify(response));
                },
                error: function(response){
                    alert(JSON.stringify(response))
                }
            });
        },1000);
        })
    </script>

This is my Django view

def room(request,room_name,current_user):
    # print("[PROMPT] current_user :"+current_user)
    try:
        all_images = Image.objects.all()
        all_users = Account.objects.all()
        room_obj = ChatRoom.objects.get(room_name=room_name)
        room_user_1 = room_obj.room_user_1
        room_user_2 = room_obj.room_user_2
        if room_user_1.username != current_user and room_user_2.username != current_user:
            return redirect('chat')
        room_messages = Message.objects.filter(room_name=room_obj)
        current_user = Account.objects.get(email=str(request.user))
        profile = Profile.objects.get(user=current_user)
        user_following = []
        friends = []
        for a in profile.user_has_follower.all():
            if a not in friends:
                friends.append(a)
        for b in profile.user_is_following.all():
            if b not in friends:
                friends.append(b)
        query = profile.user_is_following.all()
        for i in query:
            user_following.append(i)
        context={
            'username':current_user.username,
            'room_name':room_name,
            'room_user_1_username':str(room_user_1.username),
            'room_user_2_username':str(room_user_2.username),
            'room_messages':room_messages,
            'user_following':user_following,
            'friends':friends,
            'all_users':all_users,
            'all_images':all_images,
        }
        return render(request,"chat.html",context)
    except Exception as e:
        log_exception(request,e,view_name="room")
        return render(request,"error.html")

This is my urlpattern for the above view

urlpatterns = [
    path('room/<str:room_name>/<str:current_user>/',views.room,name='room'),
]

Answer 1

Have you tried adding the jquery before your ajax query?

It should look like this;

<script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
<script>
    $(document).ready(function(){
        setInterval(function(){
            $.ajax({
                type: 'GET',
                url : window.location.origin+"/room/{{room_name}}/"+username+"/",
                success: function(response){
                    console.log(JSON.stringify(response));
                },
                error: function(response){
                    alert(JSON.stringify(response))
                }
            });
        },1000);
        })
    </script>

Also, url : window.location.origin+"/room/{{room_name}}/"+username+"/", is not needed now. Can also be used as url : "/room/{{room_name}}/"+username+"/",