如何将Python脚本返回的JSON数据加载至HTML表格

存在的问题 #

• Python代码缩进错误：for row in cursor: 下的 output.append 没有缩进，会导致仅最后一条数据被插入列表
• 前端未正确解析JSON：Python返回的是JSON字符串，前端收到后默认会当做普通文本处理，无法直接按对象访问属性
• jQuery选择器错误：原代码写的$('btable')，缺少id选择器标识#，无法定位到表格元素
• 表格行缺少列：循环生成行时只插入了3个<td>，遗漏了jurisdiction对应的第四列
• 原有表格存在空占位行：渲染新数据前没有清空占位行，会留空行在表头下方

修正后的代码 #

1. Python代码修正 #

import json
import pymssql

def read_data_from_sql(sqlserverinst,uname,psswd,dbname,url,regime,jurisdiction):
    output=[]
    conn = pymssql.connect(sqlserverinst, uname, psswd, dbname)
    cursor = conn.cursor(as_dict=True)
    cursor.execute('SELECT * FROM [reg_content_extracted_url_browsed]')
    # 修复缩进问题
    for row in cursor:
        output.append({'url_id': row['url_id'],'url': row['url'],'regime': row['regime'],'jurisdiction': row['jurisdiction']})
    conn.close()
    # 如果使用Flask/Django等web框架，直接返回output字典列表即可，框架会自动转JSON并添加正确的响应头
    # 如需手动构造响应，需添加Content-Type: application/json的响应头
    return json.dumps(output)

2. 前端JS代码修正 #

$(function() {
  $('a#test').on('click', function(e) {
    e.preventDefault()
    // 增加dataType参数指定响应为JSON格式，jQuery会自动解析为JS对象
    $.get('/datahomepage', function(data) {
        const $table = $('#btable');
        // 清空表头外所有原有行，删掉原来的空占位行
        $table.find('tr:gt(0)').remove();
        let tr;
        for (let i=0;i<data.length;i++){
            tr = $('<tr/>');
            tr.append("<td>" + data[i].url_id+ "</td>");
            tr.append("<td>" + data[i].url+ "</td>");
            tr.append("<td>" + data[i].regime+ "</td>");
            // 补充遗漏的jurisdiction列
            tr.append("<td>" + data[i].jurisdiction+ "</td>");
            $table.append(tr);
        }
    }, 'json');
  });
});

可选优化 #

可将原表格里的空占位<tr>直接删除，无需额外执行清空操作；表头的url id ID存在重复，可调整为URL ID更规范。

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