테스트 사이트 - 개발 중인 베타 버전입니다

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

pd1000 11년 전 조회 10,064
안녕하세요.
Ajax로 본문 내용 불러오는 것에 대해 질문 드립니다.
 
-목적 : 게시판에서 목록을 누르면 'list.skin.php' 안에 있는 특정 div 내부에 Ajax로 해당 글을 불러오고자 합니다.
 
먼저 성공한 부분까지 말씀드리겠습니다. 
우선 'list.skin.php' 문서 안에 아래와 같이 Jquery를 이용한 Ajax 스크립트를 작성했습니다.
 
<div><font color="#00b0f0"><script <font color="#ff0000">type</font>="text/javascript" src="<?=$g4['path']?>/js/jquery-1.7.2.min.js"></script></font></div>
<div> </div>
<div><font color="#548dd4"><script <font color="#ff0000">type</font>="text/javascript"></font>
 $(<font color="#ff0000">document</font>).ready(function() {
  $('<strong><font color="#ff0000">.button'</font></strong>).click(function(){ <font color="#00b050">//버튼</font>
   $.ajax({
    type : "POST" <font color="#00b050">//"POST", "GET"</font>
    , async : true <font color="#00b050">//true, false</font>
    , url : <font color="#ff0000"><font color="#000000">"</font><strong>./board.php?bo_table<font color="#7030a0">=<?=$bo_table?></font>&wr_id=<font color="#7030a0"><?=$list[$i][wr_id]?></font></strong></font>" <font color="#00b050">//주소</font>
    , dataType : "html" <font color="#00b050">//전송받을 데이터의 타입</font>
    , cache : false  <font color="#00b050">//true, false</font>
    , data : "" <font color="#00b050">//서버에 보낼 파라메터 "a=b&c=d" 문자열로 직접 입력 가능</font>
    , contentType: "application/x-www-form-urlencoded; charset=UTF-8"
    , error : function(request, status, error) { <font color="#00b050">//통신 에러 발생시 처리</font>
     alert("code : " + request.status + "\r\nmessage : " + request.reponseText);
    }
    , success : function(response, status, request) { <font color="#00b050">//통신 성공시 처리</font>
     $('<strong><font color="#ff0000">#result</font></strong>').append(response);  <font color="#00b050">//내용이 들어올 자리  </font>
    }
    , beforeSend: function() { <font color="#00b050">//통신을 시작할때 처리</font>
     $('#ajax_indicator').show().fadeIn('fast'); 
    }
    , complete: function() { <font color="#00b050">//통신이 완료된 후 처리</font>
     $('#ajax_indicator').fadeOut();
    }
   });
  });
 });
<font color="#548dd4"></script></font></div>
<div><font color="#548dd4"></font> </div>
<div> </div>
<div><font color="#548dd4"><!--아래는 내용이 들어올 자리 --></font></div>
<div><font color="#000000"><div id="result" style="width:500px;height:300px"></div></font></div>
<div> </div>
<div> </div>
 

그 다음 'list.skin.php'의 목록이 표시되는 부분 즉,
</div>
<div><strong><font color="#00b0f0">echo "<a href='<font color="#00b050">{$list[$i][href]}</font>'>{$list[$i][subject]}</a>";</font></strong></div>
<div>
 
이 부분에서 링크(href) 부분은 빼야 겠죠. Ajax 스크립트 안에 url 쓰는 곳이 있으니까요...
아래와 같이 링크 부분은 빼고 button이라는 이름으로 class를 지정합니다.
</div>
<div><font color="#00b0f0"><strong>echo "<a href='' <font color="#ff0000">class='button'</font>>{$list[$i][subject]}</a>";</strong></font></div>
<div>
 
이제 목록의 제목을 누르면 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개

p
11년 전
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
 
요렇게 한다음 나머지는 적어주신대로 했더니 됩니다.
정말 정말 감사드립니다.
새해 복 많이 받으실거예요.
이건 간추려서 팁에 올려놓겠습니다.
정말 고맙습니다.
 
수고하세요.
로그인 후 평가할 수 있습니다

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

d
11년 전
$(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>
로그인 후 평가할 수 있습니다

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

11년 전
내용을 보니
AJAX 문제라기 보단, list로 쿼리하는 부분을 먼저 체크해 보시는게 좋겠네요.
$list[$i][wr_id] 나 <?=$list_href?>
둘 모두 지정이 제대로 되어있는지를요..
 
로그인 후 평가할 수 있습니다

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

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

로그인