Django中AJAX POST提交后如何局部刷新指定Div内容？

云上老周

2026-5-15

问题

我在Django中通过POST提交表单保存数据，保存完成后想刷新模态框内的列表，但不想刷新整个页面。请问是否需要指定模态框的完整路径？有没有类似F5但仅针对某个div的jQuery命令？

以下是我正在使用的代码：

$(function(){
    $('#js-submit-create-adres').on('click', function (e) {
        var form = $('#create-adres');
        var _czy = '';
        if ($('#id_czy_domyslny option:selected').text() == 'Tak') {
            _czy = 'True';
        } else {
            _czy = 'False';
        }
        $.ajax({
            url: form.attr('data-url'),
            type: 'post',
            dataType: 'json',
            data: {
                ulica: $('#id_ulica').val(),
                kod_pocztowy: $('#id_kod_pocztowy').val(),
                miasto: $('#id_miasto').val(),
                kontrahent: $('#id_kontrahent').val(),
                czy_domyslny: _czy,
                csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
            },
            success: function(msg){
                if(msg.result == 'done') {
                    if(_czy == 'True'){
                        $('#kontrahent-adres').text(nowy_adres);
                    }
                    alert('saved');
                    $('#id_ulica').val('');
                    $('#id_kod_pocztowy').val('');
                    $('#id_miasto').val('');
                    // HERE I WANT TO RELOAD DIV NAMED '#name'
                }
            }
        })
    })
})

回答

嘿，这个需求太常见了！咱们直接说解决方案：

首先，不需要指定模态框的完整路径，而且不存在那种像F5一样直接“刷新”单个div的命令——因为div本身只是页面的静态容器，它的动态内容来自后端，要更新就得重新获取最新的列表数据。最实用的做法是通过AJAX重新请求列表的HTML片段，再替换掉目标div的内容。

具体操作分两步：

给Django加个专门返回列表的视图
你需要写一个视图函数，不用渲染整个页面，只负责返回模态框里列表的HTML片段就行。比如可以单独写一个adres_list.html模板，里面只有列表的代码，然后让视图渲染这个模板返回。
在AJAX成功回调里更新div
用jQuery的load()方法就很方便，它会自动发起GET请求获取指定URL的内容，然后直接替换目标div的内容。比如你的列表容器是#name，可以这么写：
```
// 替换你注释的那行代码
$('#name').load('/your-django-list-view-url/');
```
为了代码更灵活，你可以像data-url那样给表单加个data-list-url属性：
```
<form id="create-adres" data-url="..." data-list-url="/path/to/list-view/">
```
然后JS里改成：
```
$('#name').load(form.attr('data-list-url'));
```

另外还有一种可选方式：让保存数据的后端视图在返回的JSON里直接带上最新的列表HTML片段。比如后端用render_to_string把列表模板转成字符串，放到返回的JSON里，然后在success回调里直接替换：

$('#name').html(msg.list_html);

这种方式少一次请求，但代码耦合度会高一点，看你自己的偏好选择。

最后，修改后的success回调示例大概是这样：

success: function(msg){
    if(msg.result == 'done') {
        if(_czy == 'True'){
            $('#kontrahent-adres').text(nowy_adres);
        }
        alert('saved');
        $('#id_ulica').val('');
        $('#id_kod_pocztowy').val('');
        $('#id_miasto').val('');
        // 刷新#name div的内容
        $('#name').load(form.attr('data-list-url'));
    }
}

内容的提问来源于stack exchange，提问作者Barburka