How do I dynamically change the value of text in html whenever a python variable is changed using ajax?

I'm using ajax, python, Django, HTML, and javascript for my project.

I'd like to know, if there is a p in my HTML file like,

<p class='text_box', id='tbox'>

    {{ text_variable_from_python }}

</p>

<input class='input_box', id='ibox', type='text'> 

And if I'd input some text into the input box, make a simple ajax request with the "text" variable and get an output from the server, which I would update on the views.py as,

def main(request):
    if request.method == 'POST':
        new_text = request.POST['text']
        context = {'text_variable_from_python': new_text}

    else:
        context = {'text_variable_from_python': 'You can change me!'}

    print(context)
    return render(request, 'Main.html', context=context)

My question is, how do I send the data dynamically from the server to appear on client's webpage using ajax and python in between the two?

Using my method, I can only see "You can change me!" on the webpage or nothing at all. No matter how many differing prompts I give, further changes do not show on the webpage.

Back to Top