如何在Django项目中通过AJAX展示JSON数组内容？

我在Django应用里用AJAX的GET请求获取数据库中的消息数组，想把这些消息循环渲染到聊天框里，但页面始终没有内容显示。相关代码如下：

HTML代码 #

<div id="display"></div>

JS代码 #

<script>
    $(document).ready(function(){
    
    setInterval(function(){
        $.ajax({
            type: 'GET',
            url : "/checkview",
            success: function(response){
                console.log(response);
                $("#display").empty();
                for (var models_to_return in response.message)
                {
                    var temp="<div class='container darker'><b>"+response.messages[models_to_returney].user_id+"</b><p>"+response.messages[models_to_return].room+"</p><span class='time-left'>"+response.messages[models_to_return].datetime+"</span></div>";
                    $("#display").append(temp);
                }
            },
            error: function(response){
                //alert('An error occured')
            }
        });
    },1000);
    })
</script>

问题点梳理 #

• 变量拼写错误：循环里用到了未定义的models_to_returney，正确变量名应为models_to_return
• 响应字段不匹配：循环遍历的是response.message（单数），但取值时用的是response.messages（复数），字段名不一致导致无法遍历到数据
• 数组遍历方式不当：for...in遍历数组会拿到索引值，还可能意外遍历到数组原型上的属性，处理数组更推荐用forEach或普通for循环
• 错误处理无提示：注释掉了错误提示，无法快速排查请求失败的问题

修复后的代码 #

<script>
    $(document).ready(function(){
    
    setInterval(function(){
        $.ajax({
            type: 'GET',
            url : "/checkview",
            success: function(response){
                console.log(response);
                const displayContainer = $("#display");
                displayContainer.empty();
                // 先确认返回的是数组再遍历
                if(Array.isArray(response.messages)){
                    response.messages.forEach(function(msg){
                        // 用模板字符串更易读
                        const temp = `<div class='container darker'><b>${msg.user_id}</b><p>${msg.room}</p><span class='time-left'>${msg.datetime}</span></div>`;
                        displayContainer.append(temp);
                    });
                }
            },
            error: function(xhr, status, error){
                // 恢复错误日志和提示，方便排查问题
                console.error('请求出错:', error);
                alert('加载消息失败，请稍后重试');
            }
        });
    },1000);
    })
</script>

额外建议 #

• 先在浏览器控制台查看response的结构，确认response.messages确实是包含消息对象的数组
• 给Django的checkview视图添加日志，验证返回的JSON数据格式是否符合预期
• 1秒一次的轮询会增加服务器压力，后续可以考虑改用WebSocket实现实时消息推送

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