Display Linked Database Records with AJAX and PHP

async function loadRecords() {
  const catId = document.getElementById('cat_id').value;
  const params = new URLSearchParams({ cat_id: catId });
  const response = await fetch(`ajax-listbox-demo2.php?${params}`);
  const payload = await response.json();
  if (!response.ok) throw new Error(payload.value.message);
  // Build table cells with textContent from payload.data.
}

This example displays countries linked to a selected continent. Choosing Show All sends cat_id=0 and returns all available records.

Demo of AJAX listbox script

Files used

config.php : Database connection settings for the downloadable example
ajax-listbox-demo.php : Category selector and JavaScript renderer
ajax-listbox-demo2.php : PHP endpoint that validates cat_id and returns JSON

Database tables

plus2_cat stores each category and plus2_subcat stores linked records through cat_id.

Validate the category ID

$catIdRaw = $_GET['cat_id'] ?? '0';
if (filter_var($catIdRaw, FILTER_VALIDATE_INT) === false || (int)$catIdRaw < 0) {
    http_response_code(400);
    exit;
}
$catId = (int) $catIdRaw;

Use a prepared query

if ($catId > 0) {
    $stmt = $dbo->prepare('SELECT subcat_id, subcat_name FROM plus2_subcat WHERE cat_id = :cat_id ORDER BY subcat_name');
    $stmt->execute([':cat_id' => $catId]);
} else {
    $stmt = $dbo->prepare('SELECT subcat_id, subcat_name FROM plus2_subcat ORDER BY subcat_name');
    $stmt->execute();
}
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);

Return JSON

header('Content-Type: application/json; charset=UTF-8');
echo json_encode([
    'data' => $result,
    'value' => ['cat_id' => $catId, 'message' => '']
]);

Render returned records safely

Use DOM methods such as createElement() and textContent for database values. This avoids treating returned names as HTML.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: