如何使用AJAX和Codeigniter获取数据？表格无数据无显示问题排查

Hey there! Let’s break down why your AJAX + CodeIgniter table isn’t loading data and fix it step by step. I’ll walk through each component (Controller, Model, View, jQuery) with common issues and actionable solutions.

Your controller acts as the middleman between the frontend and database—let’s make sure it’s set up correctly:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class DataController extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->model('DataModel'); // Critical: Load your model here
    }

    // Method to handle AJAX data requests
    public function fetch_table_data() {
        // Optional but recommended: Block non-AJAX access
        if (!$this->input->is_ajax_request()) {
            exit('Direct access not allowed');
        }

        // Pull data from the model
        $table_data = $this->DataModel->get_all_records();
        
        // Return pure JSON (no extra HTML/echo statements!)
        echo json_encode($table_data);
        exit; // Ensure no extra code runs after this
    }
}

Key Checks for Controllers: #

• Confirm your model is loaded correctly (double-check the model’s filename and class name—they’re case-sensitive in some environments).
• If CodeIgniter’s CSRF protection is enabled (in config/config.php), you’ll need to pass the CSRF token in your AJAX request (more on this later).
• Make sure there’s no accidental whitespace or debug echo/print_r statements before/after the JSON output—this will break JSON parsing.

Your model handles database queries—let’s ensure it’s returning valid data:

<?php
class DataModel extends CI_Model {

    public function get_all_records() {
        // Replace 'your_table' with your actual table name
        $query = $this->db->get('your_table');
        
        // Return an array (empty if no data exists)
        return $query->num_rows() > 0 ? $query->result_array() : [];
    }
}

Key Checks for Models: #

• Verify your database config (config/database.php) has the correct credentials, hostname, and database name.
• Test your query directly in your database client (like phpMyAdmin) to confirm it returns data. You can debug the generated SQL with echo $this->db->last_query(); in your model.
• Always return an array (even empty) instead of null—this prevents AJAX from throwing parsing errors when there’s no data.

Your HTML table needs a clear target for AJAX to inject data:

<!-- View file: example_table.php -->
<table id="dynamic-table" class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <!-- Add your other columns here -->
        </tr>
    </thead>
    <tbody>
        <!-- AJAX will populate this section -->
    </tbody>
</table>

<!-- Load jQuery FIRST, then your custom script -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    // Your AJAX code goes here
</script>

Key Checks for Views: #

• Ensure jQuery is loaded before your custom script (otherwise $ will be undefined).
• Double-check the table’s ID matches the selector in your jQuery code (e.g., #dynamic-table).

This is where most issues crop up—let’s write a robust AJAX call with debugging built in:

$(document).ready(function() {
    // Load data when the page loads
    loadTableData();

    function loadTableData() {
        $.ajax({
            url: '<?php echo base_url("DataController/fetch_table_data"); ?>', // Use base_url() for absolute path
            type: 'GET', // Or POST, match your controller's expected method
            dataType: 'json',
            // Include CSRF token if protection is enabled
            data: {
                '<?php echo $this->security->get_csrf_token_name(); ?>': '<?php echo $this->security->get_csrf_hash(); ?>'
            },
            success: function(response) {
                // First, check if data is coming through
                console.log('Received data:', response);

                const tableBody = $('#dynamic-table tbody');
                tableBody.empty(); // Clear existing data

                // Loop through data and build table rows
                $.each(response, function(index, item) {
                    const row = `
                        <tr>
                            <td>${item.id}</td>
                            <td>${item.name}</td>
                            <td>${item.email}</td>
                        </tr>
                    `;
                    tableBody.append(row);
                });
            },
            error: function(xhr, status, error) {
                // Critical: Debug errors here
                console.error('AJAX Error:', status, error);
                console.log('Server Response:', xhr.responseText); // This will show you what the server actually returned (e.g., a 500 error page)
            }
        });
    }
});

Key Checks for AJAX: #

• Use base_url() to generate your request URL—this avoids relative path issues (especially if your app is in a subfolder).
• Open your browser’s DevTools (F12) and check the Network tab:
  • A 404 error means your controller/method path is wrong.
  • A 500 error means there’s a server-side issue (e.g., SQL error in the model).
  • A 200 status with malformed JSON means there’s extra output in your controller.
• Check the Console tab for JavaScript errors (e.g., undefined variables, invalid selectors).

• CSRF Protection: If enabled, always pass the CSRF token in your AJAX data—otherwise CodeIgniter will reject the request.
• Whitespace in Controllers: Even a single space before <?php will corrupt your JSON output.
• jQuery Conflicts: If you’re using other JS libraries, replace $ with jQuery in your code to avoid conflicts.
• Database Permissions: Ensure your database user has SELECT access to the table you’re querying.

Start by checking the Network and Console tabs in DevTools—it’ll tell you exactly where the breakdown is, then work backwards to fix the issue!

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