Ajax 이용 본문 열기 - 다 되는데 마지막 하나가 안됩니다.

2013-12-30 (월) 08:20:45 10,638
안녕하세요.
Ajax로 본문 내용 불러오는 것에 대해 질문 드립니다.
 
-목적 : 게시판에서 목록을 누르면 'list.skin.php' 안에 있는 특정 div 내부에 Ajax로 해당 글을 불러오고자 합니다.
 
먼저 성공한 부분까지 말씀드리겠습니다. 
우선 'list.skin.php' 문서 안에 아래와 같이 Jquery를 이용한 Ajax 스크립트를 작성했습니다.
 
Copy
<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'의 목록이 표시되는 부분 즉,
Copy
echo "<a href='{$list[$i][href]}'>{$list[$i][subject]}</a>";
 
이 부분에서 링크(href) 부분은 빼야 겠죠. Ajax 스크립트 안에 url 쓰는 곳이 있으니까요...
아래와 같이 링크 부분은 빼고 button이라는 이름으로 class를 지정합니다.
Copy
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개

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
 
요렇게 한다음 나머지는 적어주신대로 했더니 됩니다.
정말 정말 감사드립니다.
새해 복 많이 받으실거예요.
이건 간추려서 팁에 올려놓겠습니다.
정말 고맙습니다.
 
수고하세요.
$(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?>
둘 모두 지정이 제대로 되어있는지를요..
 

답변을 작성하려면 로그인이 필요합니다.