Update 'div' after ajax request

Question

This is my first project in Django. I'm new to Django, ajax and javascript. I have to send data to jinja template after making ajax request.

My index.html is as follows:

{% if data %}
  <p>{{data.title}}</p>
  <p>{{data.price}}</p>
{% endif %}

My javascript is as follows:

<script>
 $.ajax({
        type: "POST",
        url: "/", // Replace with the URL of the actual view
        data: {
            input_value: "test",
            csrfmiddlewaretoken: "{{ csrf_token }}"
        },
        success: function(response) {
            title = response // After the request, the response will become { "data" : {"title":"t1", "price":20} }
        },
        error: function() {
            console.log("Error")
        }
    });

<script>

I don't know if this is possible. Some people use element.innerHTML to update, but I need to send to jinja format. Thank you

Answer 1

You have two options here, depending on your preference.

1. Return a template instead of JSON The idea here is to generate the template on the server side and then return the generated HTML to the AJAX caller. So Ajax success is just appending this HTML fragment to the correct location.

2. Render div in JS If you only have a JSON strategy or use DRF, the only way is to use a loop to loop through the received items and generate the equivalent HTML and then add it to the document.

You can't put JinJa on the same page because when you generate the page to render it, you haven't received the data yet.