"Head first Ajax"책의 샘플 코드로 놀고 있습니다. 여기에 코드의 두드러진 부분은 다음과 같습니다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
코드를 가져 오려고 시도했으며 var url
이 "Index.php?ImageID="...
이되도록 getDetails
함수를 수정했습니다. 그렇게하면 다음과 같은 문제가 발생합니다. 함수는 배열의 텍스트 스 니펫을 표시하지 않습니다. 대신 전체 코드 (웹 페이지 등)를 재생 한 다음 맨 아래에 예상 텍스트 조각을 재생산합니다.
왜 그럴까요?
추신 : 이제 두 가지 답변 덕분에 문제가 해결되었습니다. 내가 "Index.php?ImageID="...
이라는 URL을 부를 때, 나는 $_GET
에 해당하는 부분을 로딩하는 것이 아닙니다. null이 아닌 $_GET
값을 가진 전체 페이지를로드하고 있습니다. 이렇게하면 왜 내가 추가하고 싶은 것들을위한 별도의 페이지가 필요한지 분명하게 알 수 있습니다.
글쎄, 전체'index.php'에서 어떤 조건에 따라 나머지 컨텐츠를 반환하도록 지시하지 않으셨습니까? 당신은 그 안에 옮겨진 snippits 대신에 실제 전체'index.php'를 공유 할 수 있습니까? – David