Ajax 이용 본문 열기 - 다 되는데 마지막 하나가 안됩니다.
본문
안녕하세요.
Ajax로 본문 내용 불러오는 것에 대해 질문 드립니다.
-목적 : 게시판에서 목록을 누르면 'list.skin.php' 안에 있는 특정 div 내부에 Ajax로 해당 글을 불러오고자 합니다.
먼저 성공한 부분까지 말씀드리겠습니다.
우선 'list.skin.php' 문서 안에 아래와 같이 Jquery를 이용한 Ajax 스크립트를 작성했습니다.
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.button').click(function(){ //버튼
$.ajax({
type : "POST" //"POST", "GET"
, async : true //true, false
, url : "./board.php?bo_table=<?=$bo_table?>&wr_id=<?=$list[$i][wr_id]?>" //주소
, dataType : "html" //전송받을 데이터의 타입
, cache : false //true, false
, data : "" //서버에 보낼 파라메터 "a=b&c=d" 문자열로 직접 입력 가능
, contentType: "application/x-www-form-urlencoded; charset=UTF-8"
, error : function(request, status, error) { //통신 에러 발생시 처리
alert("code : " + request.status + "\r\nmessage : " + request.reponseText);
}
, success : function(response, status, request) { //통신 성공시 처리
$('#result').append(response); //내용이 들어올 자리
}
, beforeSend: function() { //통신을 시작할때 처리
$('#ajax_indicator').show().fadeIn('fast');
}
, complete: function() { //통신이 완료된 후 처리
$('#ajax_indicator').fadeOut();
}
});
});
});
</script>
<!--아래는 내용이 들어올 자리 -->
<div id="result" style="width:500px;height:300px"></div>
그 다음 'list.skin.php'의 목록이 표시되는 부분 즉,
echo "<a href='{$list[$i][href]}'>{$list[$i][subject]}</a>";
이 부분에서 링크(href) 부분은 빼야 겠죠. Ajax 스크립트 안에 url 쓰는 곳이 있으니까요...
아래와 같이 링크 부분은 빼고 button이라는 이름으로 class를 지정합니다.
아래와 같이 링크 부분은 빼고 button이라는 이름으로 class를 지정합니다.
echo "<a href='' class='button'>{$list[$i][subject]}</a>";
이제 목록의 제목을 누르면 class='button'이 스위치 역할을 하면서 Ajax 스크립트를 작동 시키고, 스크립트 안에 들어있는 URL에 따라 본문 내용이 'list.skin.php' 안에 있는 id="result" 라는 div 박스 안으로 들어옵니다.
즉, 새로고침 없이 목록에서 본문이 나타나는 것이죠.
그런데 문제는 저 Ajax 스크립트에 있는 url 부분에 전체 경로를 다 적어주면 잘 열리는데 변수로 적어주면 안되는군요.
./board.php?bo_table=test&wr_id=3 이렇게는 되는데
./board.php?bo_table=<?=$bo_table?> &wr_id=<?=$list[$i][wr_id]?> 이렇게는 안된다는 것이죠.
참고로 저 url 부분에 <?=$list_href?>를 직접 써줘도 안먹힙니다.
이 문제의 해결 방법을 알려주시면 참 감사하겠습니다.
이게 해결되면 저처럼 초보들에게 엄청 도움이 될 겁니다.
왜냐면 일반 웹에서 페이지 전체를 Ajax로 불러오는 것은 딱히 필요도 없고 뒤로가기가 안되니까 오히려 불편하기만 하지만 웹앱을 만들 때는 얘기가 다르기 때문입니다.
화면 깜빡임 없이 페이지 전환이 되므로 감쪽같이 네이티브 앱 흉내를 낼 수 있고 굳이 Jquery Mobile을 쓰지 않아도 되구요...
그럼 다들 새해 복 많이 받으시고 건강하십시오.
답변 3
$(document).ready(function() {
var bo_table = <?php echo $bo_table;?>;
var wr_id = "";
$('.button').click(function(){ //버튼에 wr_id 값을 붙여주어야 할 것 같습니다 :-)
wr_id = $(this).attr("data-wr_id");
$.ajax({
type : "POST" //"POST", "GET"
,async : true //true, false
, url : "./board.php?bo_table=" + bo_table + "&wr_id=" + wr_id,
html 은 아래와 같이 되겠군요.
<button class="button" data-wr_id="<?php echo $list[$i][wr_id]; ?>">버튼</button>
내용을 보니
AJAX 문제라기 보단, list로 쿼리하는 부분을 먼저 체크해 보시는게 좋겠네요.
$list[$i][wr_id] 나 <?=$list_href?>
둘 모두 지정이 제대로 되어있는지를요..
testers 님 감사합니다.
됩니다. 돼요^^
천재십니다. 정체가 뭔가요^^
운비 님도 감사드리구요...
일단 제목이 나오는 {$list[$i][href]} 를 지우고 따로 버튼으로 돌린 것까지는 제가 하긴 했었는데 왜인지는 모르겠으나 <?=$bo_table?>까지는 Ajax가 인식을 하는데 <?=$list[$i][wr_id]?> 이걸 죽어도 인식을 안해서 고민했었거든요.
암튼 <?=$bo_table?>까지는 인식을 했으니까 적어주신 것 중 맨 위에 줄
var bo_table = <?php echo $bo_table;?>;
이건 지우고 url 부분엔
./board.php?bo_table=<?=$bo_table?>" + "&wr_id=" + wr_id
요렇게 한다음 나머지는 적어주신대로 했더니 됩니다.
정말 정말 감사드립니다.
새해 복 많이 받으실거예요.
이건 간추려서 팁에 올려놓겠습니다.
정말 고맙습니다.
수고하세요.
답변을 작성하시기 전에 로그인 해주세요.
