如何使用Django在网页展示JSON详情，实现ID搜索并表格展示数据

实现逻辑 #

• 确定检索主键：你提供的JSON结构中可选择imo（船舶识别号）或call_sign（呼号）作为检索ID，二者均为唯一标识
• 预加载JSON数据：页面初始化时请求JSON文件缓存到本地，避免每次搜索重复请求
• 绑定搜索事件：监听搜索框的提交/输入事件，获取用户输入的ID值
• 数据匹配与渲染：从缓存的JSON数组中过滤出匹配的条目，动态生成表格渲染到页面，无匹配结果时展示提示信息

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>船舶信息检索</title>
    <style>
        .search-box {
            margin: 20px 0;
            gap: 10px;
            display: flex;
        }
        .search-box input {
            padding: 8px 12px;
            width: 300px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .search-box button {
            padding: 8px 20px;
            background: #2385bb;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #f5f5f5;
        }
        .no-result {
            margin-top: 20px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="请输入IMO号检索">
            <button id="searchBtn">搜索</button>
        </div>
        <div id="resultContainer"></div>
    </div>

    <script>
        // 缓存JSON数据
        let shipData = [];
        // 字段映射，用于表格表头显示中文
        const fieldMap = {
            course_speed: '航向/航速',
            current_draught: '当前吃水',
            navigation_status: '航行状态',
            position_received: '位置更新时间',
            imo: 'IMO号/MMSI',
            call_sign: '呼号',
            flag: '船籍国',
            length_beam: '长度/宽度'
        };

        // 页面加载时预加载JSON数据
        window.addEventListener('DOMContentLoaded', async () => {
            try {
                const res = await fetch('./ships.json');
                shipData = await res.json();
            } catch (e) {
                document.getElementById('resultContainer').innerHTML = '<p class="no-result">数据加载失败，请检查JSON文件路径是否正确</p>';
            }
        });

        // 绑定搜索事件
        document.getElementById('searchBtn').addEventListener('click', handleSearch);
        // 支持回车搜索
        document.getElementById('searchInput').addEventListener('keyup', (e) => {
            if (e.key === 'Enter') handleSearch();
        });

        // 搜索处理函数
        function handleSearch() {
            const searchVal = document.getElementById('searchInput').value.trim();
            const resultContainer = document.getElementById('resultContainer');
            
            if (!searchVal) {
                resultContainer.innerHTML = '<p class="no-result">请输入检索内容</p>';
                return;
            }

            // 匹配数据，这里默认按IMO号模糊匹配，要精确匹配可把includes改为===
            const matchedList = shipData.filter(item => item.imo.includes(searchVal));

            if (matchedList.length === 0) {
                resultContainer.innerHTML = '<p class="no-result">未找到匹配的记录</p>';
                return;
            }

            // 生成表格
            let tableHtml = '<table><thead><tr>';
            // 生成表头
            Object.values(fieldMap).forEach(header => {
                tableHtml += `<th>${header}</th>`;
            });
            tableHtml += '</tr></thead><tbody>';
            // 生成表格内容
            matchedList.forEach(item => {
                tableHtml += '<tr>';
                Object.keys(fieldMap).forEach(field => {
                    tableHtml += `<td>${item[field] || '-'}</td>`;
                });
                tableHtml += '</tr>';
            });
            tableHtml += '</tbody></table>';

            resultContainer.innerHTML = tableHtml;
        }
    </script>
</body>
</html>

使用说明 #

• 将你的JSON数据保存为ships.json文件，和上述HTML文件放在同一文件夹下
• 如果需要更换检索字段，比如按呼号检索，将代码中item.imo.includes(searchVal)里的imo改为call_sign即可
• 如果需要精确匹配检索值，将includes方法替换为===即可
• 可直接在本地浏览器打开HTML文件测试，不需要额外搭建服务端环境（部分浏览器限制本地文件fetch请求的话，可使用本地静态服务工具如serve启动后访问）

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