PHP循环生成合法JSON及Bootstrap站点前端排序功能实现

一、解决JSON格式问题 #

你之前在循环中每次调用json_encode会输出多个独立的JSON对象，前端无法解析为完整数组。正确做法是先把所有数据收集到一个PHP数组，最后一次性编码输出。

修正后的PHP后端代码 #

<?php
// 初始化数据库连接（以PDO为例，根据你的实际配置调整）
$dsn = 'mysql:host=localhost;dbname=your_database;charset=utf8mb4';
$pdo = new PDO($dsn, 'db_user', 'db_password');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 接收前端排序参数，默认按ID排序
$sort_field = $_GET['sort_by'] ?? 'id';
// 限制允许的排序字段，防止SQL注入风险
$allowed_fields = ['id', 'created_at', 'updated_at'];
$sort_field = in_array($sort_field, $allowed_fields) ? $sort_field : 'id';

// 构建带排序的查询语句
$sql = "SELECT * FROM your_table ORDER BY $sort_field DESC"; // DESC为降序，改成ASC就是升序
$stmt = $pdo->prepare($sql);
$stmt->execute();

// 收集所有数据到数组
$items = [];
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $items[] = $row;
}

// 设置JSON响应头，确保前端正确解析
header('Content-Type: application/json; charset=utf-8');
// 输出完整的JSON数组
echo json_encode($items);
exit;
?>

二、前端下拉排序实现 #

HTML下拉框 #

<select id="sortSelector" class="form-select w-auto mb-3">
    <option value="id">默认按ID排序</option>
    <option value="created_at">按创建日期排序</option>
    <option value="updated_at">按修改日期排序</option>
</select>
<!-- 卡片容器 -->
<div id="cardContainer" class="row g-3"></div>

jQuery Ajax交互代码 #

// 页面加载时默认加载数据
renderCards('id');

// 下拉框切换时触发排序
$('#sortSelector').on('change', function() {
    const sortBy = $(this).val();
    renderCards(sortBy);
});

// 封装卡片渲染函数
function renderCards(sortField) {
    $.ajax({
        url: 'your_php_file.php', // 替换为你的PHP脚本路径
        type: 'GET',
        data: { sort_by: sortField },
        dataType: 'json',
        success: function(data) {
            // 清空容器
            $('#cardContainer').empty();
            // 遍历JSON数组生成卡片
            data.forEach(item => {
                const cardHtml = `
                    <div class="col-md-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="card-title">${item.title}</h5>
                            </div>
                            <div class="card-body">
                                <p class="card-text">ID: ${item.id}</p>
                                <p class="card-text small text-muted">创建时间: ${item.created_at}</p>
                                <p class="card-text small text-muted">修改时间: ${item.updated_at}</p>
                            </div>
                        </div>
                    </div>
                `;
                $('#cardContainer').append(cardHtml);
            });
        },
        error: function() {
            $('#cardContainer').html('<div class="col-12"><div class="alert alert-danger">加载数据失败</div></div>');
        }
    });
}

三、重要提示 #

• SQL注入防护：通过allowed_fields数组限制排序字段，避免恶意参数篡改SQL语句
• 编码一致性：确保数据库、PHP脚本、前端页面都使用UTF-8编码，防止乱码
• 响应头设置：必须添加Content-Type: application/json，否则前端可能无法正确识别JSON格式

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