This is what I have in views

This a function in javascript

I get this message when I run the project

However the responses are displayed in a blank page like this

how do I get the httpsresponse to display in the same page in the chat window and not in a different page

I'm completely new to Django and javascript . It would be of great help if anyone can help. Thanks in advance.

This is what i have in script.js

 onSendButton(chatbox) {
    var textField = chatbox.querySelector('input');
    let text1 = textField.value
    if (text1 === "") {
        return;
    }

    let msg1 = { name: "User", message: text1 }
    this.messages.push(msg1);

    fetch('http://127.0.0.1:8000/', {
        method: 'POST',
        body: JSON.stringify({ message: text1 }),
        mode: 'cors',
        headers: {
          'Content-Type': 'application/json'
        },
      })
      .then(r => r.json())
      .then(r => {
        let msg2 = { name: "Sam", message: r.answer };
        this.messages.push(msg2);
        this.updateChatText(chatbox)
        textField.value = ''

    }).catch((error) => {
        console.error('Error:', error);
        this.updateChatText(chatbox)
        textField.value = ''
 

     });
    }

This is what i have in views

def index(request):
    if request.method == "POST":
        name = request.POST.get("name", "")
        response = chatbot_response(name)
        if response != "":
            return HttpResponse(response)
        else:
            return HttpResponse(response)

    return render(request, "index.html")

I would be really usefull If anyone can help