1

本「Head first Ajax」のサンプルコードで遊んでいます。コードの重要な部分は次のとおりです。

Index.php - HTML ピース:

<body>
  <div id="wrapper">
    <div id="thumbnailPane"> 
      <img src="images/itemGuitar.jpg" width="301" height="105" alt="guitar" 
           title="itemGuitar" id="itemGuitar" onclick="getDetails(this)"/>
      <img src="images/itemShades.jpg" alt="sunglasses" width="301" height="88" 
           title="itemShades" id="itemShades" onclick="getDetails(this)" />
      <img src="images/itemCowbell.jpg" alt="cowbell" width="301" height="126" 
           title="itemCowbell" id="itemCowbell" onclick="getDetails(this)" />
      <img src="images/itemHat.jpg" alt="hat" width="300" height="152" 
           title="itemHat" id="itemHat" onclick="getDetails(this)" />
    </div>

    <div id="detailsPane">
      <img src="images/blank-detail.jpg" width="346" height="153" id="itemDetail" />
      <div id="description"></div>
    </div>

  </div>
</body>

Index.php - スクリプト:

function getDetails(img){
  var title = img.title;
  request = createRequest();
  if (request == null) {
    alert("Unable to create request");
    return;
  }
  var url= "getDetails.php?ImageID=" + escape(title);
  request.open("GET", url, true);
  request.onreadystatechange = displayDetails;
  request.send(null);
}
function displayDetails() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      detailDiv = document.getElementById("description");
      detailDiv.innerHTML = request.responseText;
    }else{
      return;
    }
  }else{
    return;
  }
  request.send(null);
}

そして Index.php:

<?php
$details = array (
  'itemGuitar' => "<p>Pete Townshend once played this guitar while his own axe was in the shop having bits of drumkit removed from it.</p>",
  'itemShades' => "<p>Yoko Ono's sunglasses. While perhaps not valued much by Beatles fans, this pair is rumored to have been licked by John Lennon.</p>",
  'itemCowbell' => "<p>Remember the famous \"more cowbell\" skit from Saturday Night Live? Well, this is the actual cowbell.</p>",
  'itemHat' => "<p>Michael Jackson's hat, as worn in the \"Billie Jean\" video. Not really rock memorabilia, but it smells better than Slash's tophat.</p>"
);
if (isset($_REQUEST['ImageID'])){echo $details[$_REQUEST['ImageID']];}
?>

このコードが行うことは、誰かがサムネイルをクリックすると、対応するテキストの説明がページに表示されることだけです。

これが私の質問です。getDetails.phpコードを の中に入れて、関数Index.phpを変更して . これを行うと、次の問題が発生します。関数は、配列内のテキストのスニペットを表示する必要がありますが、表示しません。代わりに、コード全体 (Web ページなど) を再現し、最後に予想されるテキストのスニペットを再現します。getDetailsvar url"Index.php?ImageID="...

何故ですか？

PS: OK、以下の 2 つの回答のおかげで、問題を理解できました。url を呼び出すとき"Index.php?ImageID="...、に対応する部分をロードするだけではありません$_GET。現在、null 以外の値でページ全体を読み込んでい$_GET ます。これにより、追加したいもののためだけに別のページが必要な理由が明確になります。

4

2 に答える 2

2

画像情報の要求を認識すると、データを吐き出しますが、残りのスクリプトの実行を妨げることは何もしません。あなたは変えることができます

if (isset($_REQUEST['ImageID'])){echo $details[$_REQUEST['ImageID']];}

のようなものに

if (isset($_REQUEST['ImageID'])){
  echo $details[$_REQUEST['ImageID']];
  exit;
}

それでも、画像情報には別の URL を使用することをお勧めします。結局のところ、URL はそこで見つかったリソースを説明する必要があります。

于 2012-11-19T22:59:05.780 に答える
1

これは、ページ全体を要求しているためです。Ajax は成功し、要求どおりにページを返します。

Ajax は、同一ページのリクエスト用ではありません。処理ファイルはインデックス ファイルとは別に保管してください。

于 2012-11-19T22:57:44.957 に答える