如何使用jQuery从JSON数据创建Div展示Ajax请求返回的记录

Hey there! Let's tackle this problem together. You've already got the core framework set up for handling the Ajax response—great start. Now, let's fill in that missing part where you create the DOM elements to display each record using jQuery's element creation methods.

完整实现代码 #

try { 
    answer = $.parseJSON(answer); 
    targetDiv.html(''); 
    for(var record in answer) { 
        record = answer[record]; 
        // 创建单条记录的容器Div
        var recordContainer = $('<div>').addClass('record-item');
        
        // 创建并添加ID展示元素
        var idElement = $('<div>').addClass('record-id').text(`ID: ${record.ID}`);
        recordContainer.append(idElement);
        
        // 创建并添加名称展示元素
        var nameElement = $('<div>').addClass('record-name').text(`Name: ${record.name}`);
        recordContainer.append(nameElement);
        
        // 将完整的记录容器添加到目标Div中
        targetDiv.append(recordContainer);
    } 
} catch(e) { 
    alert('Server is down!'); 
}

代码细节说明 #

• 我们用$('<div>')直接创建DOM元素，这种方式比拼接HTML字符串更安全，能有效避免XSS注入风险，也更便于后续的DOM操作。
• 给每个元素添加类（比如record-item、record-id），方便你通过CSS来美化这些记录的展示样式。
• 使用.text()方法设置内容，确保文本内容会被正确转义，不会被当作HTML解析。

如果喜欢更简洁的链式写法，也可以把创建和追加的步骤合并：

// 链式调用简化写法
var recordContainer = $('<div>').addClass('record-item')
    .append($('<div>').addClass('record-id').text(`ID: ${record.ID}`))
    .append($('<div>').addClass('record-name').text(`Name: ${record.name}`));

targetDiv.append(recordContainer);

这样就能完美把返回的JSON记录转换成可展示的DOM元素啦！

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