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

Posted 2023-03-05

【中文标题】如何在单击时仅重新加载一个 div？

【英文标题】：How can I reload just one div on click?

【发布时间】：2015-01-28 21:14:36

【问题描述】：

我使用 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_URLcss/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，但我不知道该怎么做。

【问题讨论】：

这能回答你的问题吗？ Onclick reload the div only

【参考方案1】：

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

<link rel="stylesheet" type="text/css" href="STATIC_URLcss/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>

【讨论】：

非常好用！我在 url 参数中输入了我的视图的路径，以使用关联的联系人刷新 div。