How can I reload just one div on click?

问题:

I use Django and Python.

Okay, the context is :

models.py :

class Contacts(models.Model):
    lastname = models.CharField(max_length=150)
    firstname = models.CharField(max_length=150)

views.py

def home(request):
    contacts = Contacts.objects.all()
    return render(request, 'index.html', {'contacts':contacts,})



def contact(request, contact_id):
    contact = Contacts.objects.get(pk=contact_id)
    return render(request, 'details.html', {'contact':contact,})

index.html :

<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/style.css">
<div class="container">

    <div class="contacts">
        <ul class="list-contacts">
            {% for contact in contacts %}
                <a href="#"><li class="contact">{{contact.lastname}}</li></a>
            {% endfor %}
        </ul>
    </div>

    <div class="details">
        {% include 'details.html' %}
    </div>

</div>

details.html :

{{contact.lastname}} {{contact.lastname}}<br>
{{contact.phone}}

How can I reload just the details div, and not the whole page, when I click on the lastname of one of the contacts in the list (which is actually a link)? I know I have to use AJAX, but I have no idea of how to do it.

回答1:

Something like this ought to work (not tested):

<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/style.css">
<div class="container">

    <div class="contacts">
        <ul class="list-contacts">
            {% for contact in contacts %}
                <a href="#"><li class="contact" id="{{contact.id}}">{{contact.lastname}}</li></a>
            {% endfor %}
        </ul>
    </div>

    <div class="details">
        {% include 'details.html' %}
    </div>

</div>

<script>
$(document).on('click','.contact',function(e) {
    var id = $(this).attr("id");

    $.ajax({
        type: "GET",
        url: '/path/' + id,
        success: function (result) {
            $('.details').html(result);
        },
    });
});
</script>