Django中如何使用AJAX获取并展示REST API接口返回的数据

问题排查 #

• 核心问题1：接口返回的是单个JSON对象，不是数组，你用data.length获取长度会得到undefined，for循环的判断条件i < totalLength直接不成立，所以不会执行任何拼接逻辑，自然没有内容渲染。
• 次要问题2：AJAX请求的URL和接口实际地址不一致，接口地址是http://127.0.0.1:8000/api/v1/test/，你代码里漏了末尾的斜杠，虽然部分Django配置会自动重定向补全斜杠，但最好保持一致避免跨域或者404问题。
• 次要问题3：字符串拼接处有语法错误，"<td>" + data[i].server + "</td>"后面没有加+就直接写"</tr>"，会触发语法错误。

修正后代码 #

只需要修改BindConnection函数里的success回调逻辑即可：

function BindConnection(){
    $.ajax({
        type:"GET",
        dataType: "JSON",
        // 补全URL末尾的斜杠
        url: "http://127.0.0.1:8000/api/v1/test/", 
        success: function(data){
            console.log(data);
            // 直接取对象的server属性，不需要循环
            var str = "<tr>" +
                        "<td>" + data.server + "</td>" +
                      "</tr>";
            $("#divBody").append(str)
        }
    });
}

如果后续接口调整为返回多个连接信息的数组，再保留循环逻辑即可，当前单条结果不需要遍历。

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