2

やり たいこと 見せたい作品がいくつかあります。だから、私はこれらのサムネイルを持っています。訪問者がサムネイルをクリックすると、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>

ご覧のとおり、作品ごとにliタグを含むulタグをつけています。各 li タグはデータベース内の作品の ID を取得し、各 li には、slickbox に表示するテキストを含む 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 は必要ないと思います)。

詳しいご意見と先輩方のアドバイスをお願いします。

4

1 に答える 1

4

サーバーへのリクエストを（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
}

お役に立てば幸いです。

于 2013-03-06T17:11:52.773 に答える