求助：JSON数据无法正确填充Bootstrap Table问题

Let's break down the key issues preventing your Bootstrap Table from loading data correctly:

1. Invalid JSON Output from PHP #

Your current PHP code echoes individual JSON objects one after another (like {"queue":"1"...}{"queue":"2"...}), which creates invalid JSON syntax. Bootstrap Table expects a valid JSON array of objects, not concatenated standalone objects.

Fix the PHP Code #

Collect all rows into an array first, then encode the entire array once to produce valid JSON:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "db";

$con = mysqli_connect('localhost','root','','db');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

$sql = "SELECT queue, nation_name FROM nations WHERE queue IS NOT NULL ORDER BY queue ASC";
$result = mysqli_query($con, $sql);

$rows = []; // Initialize empty array to store all rows
if (mysqli_num_rows($result) > 0) {
    while($row = mysqli_fetch_assoc($result)) {
        $rows[] = $row; // Add each row to the array
    }
    echo json_encode($rows); // Encode full array as valid JSON
} else {
    echo json_encode([]); // Return empty array for consistency instead of text
}

mysqli_close($con);
?>

This will output a properly formatted JSON array:
[{"queue":"1","nation_name":"Afghanistan"},{"queue":"2","nation_name":"Sweden"}]

2. JavaScript Isn't Parsing the JSON Response #

Your AJAX call receives the response as a plain string, but Bootstrap Table needs a JavaScript array of objects. Fix this in one of two ways:

Option 1: Let jQuery Auto-Parse JSON #

Add dataType: 'json' to your AJAX options to tell jQuery to convert the response string into a JavaScript array automatically:

$.ajax({
    type: 'POST',
    url: 'getqueue.php',
    data: {},
    dataType: 'json', // Auto-parse response to JSON
    success: function(response) {
        $('#maintable').bootstrapTable({ data: response });
    },
    error: function() {
        alert('Failed to load data');
    }
});

Option 2: Manually Parse the JSON String #

If you prefer not to use dataType, explicitly convert the response string to a JavaScript array:

$.ajax({
    type: 'POST',
    url: 'getqueue.php',
    data: {},
    success: function(response) {
        var data = JSON.parse(response); // Convert string to array
        $('#maintable').bootstrapTable({ data: data });
    },
    error: function() {
        alert('Failed to load data');
    }
});

3. Redundant Document Ready Wrapper #

Your original code uses $(function () { ... }) inside the AJAX success callback, which is unnecessary. Since your script loads at the end of the <body>, the DOM is already ready when the AJAX success runs. Removing this wrapper ensures the table initializes immediately when data is received.

Final Checks #

• Visit getqueue.php directly in your browser to confirm it returns valid JSON.
• Check your browser's developer console (F12) for any JavaScript errors that might block table initialization.

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