如何在单击时仅重新加载一个 div？

Question

我使用 Django 和 Python。

好的，上下文是：

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}}

当我单击列表中一个联系人的姓氏（实际上是一个链接）时，如何仅重新加载详细信息 div，而不是整个页面？ 我知道我必须使用 AJAX，但我不知道该怎么做。

Answer 1

这样的东西应该可以工作（未经测试）：

<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>