我要实现的目标
我有一些要展示的作品。所以，我有这些的缩略图。当访客单击缩略图时，我希望打开一个div（称为slickbox）并显示标题，说明和有关所单击作品的滑块。

我已经完成的工作以及如何 从数据库中获取工作数据。这是我的作品清单的一小部分：

index.php

<?php
  $retour_messages = mysql_query('SELECT 2K13_works.*, 2K13_categories.nom AS nomCAT FROM 2K13_works, 2K13_categories WHERE 2K13_works.cat_id = 2K13_categories.cat_id ORDER BY 2K13_works.record_date DESC') or die(mysql_error());//requete sql pour récupérer les works de la page
  ?>
  <ul id = "creations" class = "step">
    <?php
  while($donnees_messages=mysql_fetch_assoc($retour_messages)){
  echo '<li class = "step '.$donnees_messages['nomCAT'].'" id="'.$donnees_messages['work_id'].'">
               <div class = "item"><a href = "#"><img src = "'.$donnees_messages['thumbLink'].'" alt = "'.$donnees_messages['titre'].'" title = "" width = "226" height = "147"/></a>
                <div class = "caption">
                  <h3>'.$donnees_messages['titre'].'</h3>
                  <p>'.html_entity_decode($donnees_messages['resume'],ENT_QUOTES,'UTF-8').'</p>
                  <p id = "desc" class = "hidden">'.html_entity_decode($donnees_messages['description'],ENT_QUOTES,'UTF-8').'</p>
                  <!--<p id = "idw" class = "hidden">'.$donnees_messages['work_id'].'</p>-->
                </div>
              </div>
            </li>';
            }
 ?>
  </ul>

如您所见，我有一个ul标签，其中每个作品都包含li标签。每个li标签获取数据库中工作的ID，每个li标签包含h3标签和p标签，这些标签包含我想在滑动框中显示的文本（有关图像，我将在后面看到）。

现在，我的slickbox的JavaScript代码出现和消失：

front_functions.js

//_____________SLICKBOX__________________________________
$('#slickbox').hide();
$("#creations li").click(function(e) {
    // shows the slickbox on clicking the noted link
    $titre = $(e.target).children("h3").text();
    $bla = $(e.target).children("#hidden").text();
    $("#description").children("h1").text($titre) ;
    $("#description").children("p").text($bla); 
      $('#slickbox').slideDown();
      e.preventDefault();
      $(e.target).empty();
      //return false;
});

该代码无法正常工作，因为我的滑动框已在工作之前加载。这就是为什么我需要Ajax和发送和执行请求的异步方式的原因。

我在这里阅读了此示例代码：很有帮助。但是，我有一个问题：我正在使用jQuery，并且想使用$.ajax()。而且我只是不太了解如何做到这一点。

是否必须设置XHMLHTTPRequest对象？我在哪里可以编写Ajax调用？我可以调用函数而不是URL吗？

喜欢做（我不知道）：

$(#creations li).click(function(e){
        $.ajax(){
           function : "displayContent(id,desc,title)",
        }
}
function displayContent(id,desc,title){
    $(#slickBox).children("h1").innerHTML(title);
    $(#slickBox).children("p").innerHTML(desc);
    $(#slickBox).show();
}

我什至不知道我是否应该使用JSON（但是，因为我的数据已经存储，并且我只想显示它们，所以我认为不需要Json）。

请给我您的见解和高级建议。