How to Dynamically Load DIV Content Based on List Item Selection with AJAX, PHP, and jQuery?

Manipulating DIV Content with AJAX, PHP, and jQuery

In this scenario, we aim to dynamically modify the content of a DIV element based on the selection of a list item. Here's how to achieve this using AJAX, PHP, and jQuery:

1. Create the DIV and List Structure:

<code class="html"><div id="summary">Here is a summary of the movie</div>
<ul>
  <li><a href="?id=1" class="movie">Name of movie 1</a></li>
  <li><a href="?id=2" class="movie">Name of movie 2</a></li>
  ...
</ul></code>

2. Define the AJAX Function:

<code class="javascript">function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'your_php_script.php',
    data: "id=" + id,
    success: function(data) {
      $('#summary').html(data);
    }
  });
}</code>

3. Add the Click Event to List Items:

<code class="html"><ul>
  <li><a onclick="getSummary(1)">View Text 1</a></li>
  <li><a onclick="getSummary(2)">View Text 2</a></li>
  ...
</ul></code>

4. PHP Script to Handle the Request:

In your PHP script, retrieve the movie ID ($id) from the $_GET array and fetch the summary from the database. Then return it as a string:

<code class="php">$id = $_GET['id'];
$summary = getMovieSummary($id);
echo $summary;</code>

The above is the detailed content of How to Dynamically Load DIV Content Based on List Item Selection with AJAX, PHP, and jQuery?. For more information, please follow other related articles on the PHP Chinese website!