Question

我想要实现的目标 我有一些我想展示的作品。所以，我有这些缩略图。当访问者点击缩略图时，我想要一个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中显示的文本（对于图像，我稍后会看到）。

现在，我的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;
});

此代码无效，因为我的slickbox在工作之前已加载。这就是为什么我需要Ajax以及发送和执行请求的异步方式。

我在这里阅读了这个示例代码：which is quite helpful。但是，我有一个问题：我正在使用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）。

请告诉我你的意见和你的高级建议。

Answer 1

当您发送服务器请求（带有ajax）时，这就像您在页面中提交表单一样。
因此，当表单提交时，你可以用php做的每一件事，你也可以用ajax做到这一点例如，如果你想用ajax在php中调用一个函数，只需像这样向php发送一个参数：

$.ajax({  
  type:'POST',
  data:{
     param:'Hey_php_call_this_function' 
  },
  success:function(data){
     alert('hey jquery , php said : ' + data);
  }
});

并在服务器端：

if(isset($_POST['param']) && $_POST['param'] == 'Hey_php_call_this_function'){
    echo call_a_function();  /// "output to callback success function"  = data
}

希望对你有所帮助。

用Ajax调用函数？

1 个答案: