title: jquery/ajax request to server and display selected record
body: <p>I am wondering how jquery/ajax can send a query to the server and then let the server (php) calculte the response, and append it to the webpage with jquery/ajax again?</p>
  
  <p>Example :
  I have 3 products in database with the details for each product (name, description and image).
  I have a page with links to these 3 products and I want to display only the clicked product details with jquery/ajax : </p>
  
  <p>html :</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#prod1"&gt;prod1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#prod2"&gt;prod2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#prod3"&gt;prod3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function() {
      $('a').click(function(){
          $('div').load("products.php");
      });
  });
  </code></pre>
  
  <p>this is what my products.php file looks like :</p>
  
  <pre><code>&lt;?php
  try
      {$bdd = new PDO('mysql:host=localhost;dbname=ddb', 'root', '');}
  catch (Exception $e)
      {die('Error : ' . $e-&gt;getMessage());}
  $reponse = $bdd-&gt;query('SELECT * FROM products ORDER BY id DESC') or die(print_r($bdd-&gt;errorInfo()));
  ?&gt;
  
  &lt;div class="prod_details"&gt;
      while ($data = $reponse-&gt;fetch()){ ?&gt;
          &lt;h1&gt;&lt;?php echo $products['name']; ?&gt;&lt;/h1&gt;
          &lt;p&gt;&lt;?php echo $products['description']; ?&gt;&lt;/p&gt;
          &lt;img src="&lt;?php echo $products['image_path']; ?&gt;"&gt;
      &lt;?php }?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This displays all the products, how can I get only the clicked product to be displayed?</p>