How can AJAX and jQuery be utilized in PHP to dynamically load content on a webpage?

To dynamically load content on a webpage using AJAX and jQuery in PHP, you can make an AJAX request to a PHP script that fetches the desired content from a database or external source. The PHP script should return the data in a format like JSON, which can then be processed and displayed on the webpage using jQuery. 

// PHP script to fetch content from database and return as JSON
// content.php

// Connect to database
$pdo = new PDO('mysql:host=localhost;dbname=your_database', 'username', 'password');

// Fetch content from database
$stmt = $pdo->query('SELECT * FROM your_table');
$content = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Return content as JSON
header('Content-Type: application/json');
echo json_encode($content);
```

```javascript
// jQuery code to make AJAX request and dynamically load content on webpage
// index.html

<div id="content"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $.ajax({
      url: 'content.php',
      type: 'GET',
      dataType: 'json',
      success: function(data) {
        data.forEach(function(item) {
          $('#content').append('<p>' + item.title + '</p>');
        });
      },
      error: function() {
        $('#content').html('Error loading content');
      }
    });
  });
</script>

Keywords

AJAX jQuery PHP dynamic content webpage

Related Questions