만들면서 배우는 CodeIgniter Q&A

제목 ajax jquery 부분 질문있습니다
글쓴이 초보자임 작성시각 2014/09/12 21:02:23
댓글 : 5 추천 : 0 스크랩 : 0 조회수 : 15137   RSS
ajax 와 jquery로 페이지 새로고침없이 댓글을 다는 부분입니다

view_v.php

$(function(){
        $("#comment_add").click(function(){
            $.ajax({
                url: "/bbs/ajax_board/ajax_comment_add",
                type: "POST",
                data:{
                    "comment_contents":encodeURIComponent($("#input01").val()),
                    "csrf_test_name":getCookie('csrf_cookie_name'),
                    "table":"<?php echo $this->uri->segment(3);?>",
                    "board_id":"<?php echo $this->uri->segment(5);?>"
                },
                dataType: "html",
                complete:function(xhr, textStatus){
                    if (textStatus == 'success')
                    {
                        if ( xhr.responseText == 1000 )
                        {
                            alert('댓글 내용을 입력하세요');
                        }
                        else if ( xhr.responseText == 2000 )
                        {
                            alert('다시 입력하세요');
                        }
                        else if ( xhr.responseText == 9000 )
                        {
                            alert('로그인하여야 합니다.');
                        }
                        else
                        {
                            $("#comment_area").html(xhr.responseText);
                            $("#input01").val('');
                        }
                    }
                }
            });
        });
.
.
.
<article id="board_area">
        <header>
            <h1></h1>
        </header>
        <table cellspacing="0" cellpadding="0" class="table table-striped">
            <thead>
                <tr>
                    <th scope="col"><?php echo $views->subject;?></th>
                    <th scope="col">이름 : <?php echo $views->user_name;?></th>
                    <th scope="col">조회수 : <?php echo $views->hits;?></th>
                    <th scope="col">등록일 : <?php echo $views->reg_date;?></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th colspan="4">
                        <?php echo $views->contents;?>
                    </th>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="4"><a href="/bbs/board/lists/<?php echo $this->uri->segment(3);?>/page/<?php echo $this->uri->segment(7);?>" class="btn btn-primary">목록</a> <a href="/bbs/board/modify/<?php echo $this->uri->segment(3);?>/board_id/<?php echo $this->uri->segment(5);?>/page/<?php echo $this->uri->segment(7);?>" class="btn btn-warning">수정</a> <a href="/bbs/board/delete/<?php echo $this->uri->segment(3);?>/board_id/<?php echo $this->uri->segment(5);?>/page/<?php echo $this->uri->segment(7);?>" class="btn btn-danger">삭제</a> <a href="/bbs/board/write/<?php echo $this->uri->segment(3);?>/page/<?php echo $this->uri->segment(7);?>" class="btn btn-success">쓰기</a></th>
                </tr>
            </tfoot>
        </table>

        <form class="form-horizontal" method="post" action="" name="com_add">
          <fieldset>
            <div class="control-group">
              <label class="control-label" for="input01">댓글</label>
              <div class="controls">
                <textarea class="input-xlarge" id="input01" name="comment_contents" rows="3"></textarea>
                <input class="btn btn-primary" type="button" id="comment_add" value="작성">
                <p class="help-block"></p>
              </div>
            </div>
          </fieldset>
        </form>
        <div id="comment_area">
            <table cellspacing="0" cellpadding="0" class="table table-striped" id="comment_table">
<?php
foreach ($comment_list as $lt)
{
?>
                <tr id="row_num_<?php echo $lt->board_id;?>">
                    <th scope="row">
                        <?php echo $lt->user_id;?>
                    </th>
                    <td><?php echo $lt->contents;?></a></td>
                    <td><time datetime="<?php echo mdate("%Y-%M-%j", human_to_unix($lt->reg_date));?>"><?php echo $lt->reg_date;?></time></td>
                    <td><a href="#" class="comment_delete" vals="<?php echo $lt->board_id;?>"><i class="icon-trash"></i>삭제</a></td>
                </tr>
<?php
}
?>
            </table>
        </div>
    </article>







ajax_board.php

public function ajax_comment_add()
    {
        if( @$this->session->userdata('logged_in') == TRUE )
        {
            $this->load->model('board_m');

            $table = $this->input->post("table", TRUE);;
            $board_id = $this->input->post("board_id", TRUE);;
            $comment_contents = $this->input->post("comment_contents", TRUE);

            if ( $comment_contents != '')
            {
                $write_data = array(
                    'table' => $table, //게시판 테이블명
                    'board_pid' => $board_id, //원글 번호
                    'subject' => '',
                    'contents' => $comment_contents,
                    'user_id' => $this->session->userdata('username')
                );

                $result = $this->board_m->insert_comment($write_data);

                if ( $result )
                {
                    //글 작성 성공시 댓글 목록 만들어 화면 출력
                    $sql = "SELECT * FROM ".$table." WHERE board_pid = '".$board_id."' ORDER BY board_id DESC";
                    $query = $this->db->query($sql);
?>
    <table cellspacing="0" cellpadding="0" class="table table-striped" id="comment_table">
<?php
foreach ($query->result() as $lt)
{
?>
            <tr id="row_num_<?php echo $lt->board_id;?>">
                <th scope="row">
                    <?php echo $lt->user_id;?>
                </th>
                <td><?php echo $lt->contents;?></a></td>
                <td><time datetime="<?php echo mdate("%Y-%M-%j", human_to_unix($lt->reg_date));?>"><?php echo $lt->reg_date;?></time></td>
                <td><a href="#" class="comment_delete" vals="<?php echo $lt->board_id;?>"><i class="icon-trash"></i>삭제</a></td>
            </tr>
<?php
}
?>

    </table>
<?php
                }
                else
                {
                    //글 실패시
                    echo "2000";
                }

            }
            else
            {
                //글 내용이 없을 경우
                echo "1000";
            }
        }
        else
        {
            echo "9000"; //로그인 필요 에러
        }
    }



여기 부분인데요
먼저 view_v.php 부분에서 선택한 글과 댓글들을 보여줌 댓글 작성시
ajax_board 의 메소드 ajax_comment_add 호출

입력한 댓글을 디비에 삽입하고 입력한 댓글을 뿌려줌 foreach문에서 (이부분이 없으면 리스트가 안보임)

완료 후 콜백함수 실행... 성공했으니
$("#comment_area").html(xhr.responseText);
                            $("#input01").val('');

이 부분 실행

이부분이 뜻하는 것은 ajax_comment_add 메소드에서 echo로 화면에 뿌려진 부분, html 부분
다시 말해 table과 foreach가 결합된 부분의 내용을 불러와서 
comment_area 이곳에 넣어주는것

이렇게 이해를 했는데 제대로 한게 맞나요? 아리까리해서요..
특히 $("#comment_area").html(xhr.responseText); 이부분이 해깔리네요
xhr.responseText를 하면 서버쪽에서 echo로 뿌려준 텍스트를 가져오는게 맞는건가요?

질문이 너무기네요.. 죄송해요
그래도 답변 부탁드려요! ㅋㅋ

 
 다음글 alert 랑 view 질문있습니다. (2)
 이전글 redirect 질문입니다. (4)
목록

댓글

변종원(웅파) / 2014/09/13 11:34:06 / 추천 0
질문은 기나 답변은 간단하네요. 맞습니다. ^^
초보자임 / 2014/09/13 13:30:59 / 추천 0
감사합니다 ㅋㅋ
초보자임 / 2014/09/13 14:41:35 / 추천 0
갑자기 이해가 안되는게 생겼는데.. 
view에서 댓글을 쓰고 ajax_comment_add에 가서 댓글을 등록시키면
ajax_comment_add에 있는 foreach로 댓글을 다시 뿌려주는데 
그럼 게시판 본문은 나오지말고 댓글부분만 나와야되는거 아닌가요?

아니면 뿌려주고 바로 view가 호출되고 콜백함수 호출되면서 ajax_comment_add 에서 echo 된부분을 바로 리로딩 시켜주는건가요?



 
변종원(웅파) / 2014/09/15 11:31:07 / 추천 0
php 소스와 ajax가 작동하는 시점을 헷갈리신 것 같습니다.

foreach는 최초 그 페이지에 접속했을때 댓글 리스트를 보여주는 것이구요. 
화면이 뜬 상태에서 댓글을 달면 ajax로 위 댓글 리스트 밑에 붙여주는 겁니다.

최초 화면 로딩시 댓글 리스트도 ajax로 할 수 있으니 화면로딩이 좀 느립니다.
그래서 처음에 보여줄때는 php로 보여주고 그 이후 댓글쓰기부터 ajax로 작동합니다.
초보자임 / 2014/09/15 21:32:55 / 추천 0
이제 이해됐습니다 ㅋㅋ 감사합니다!