1. ajax 처리에서 반환 값으로 데이터를 파싱할 페이를 만든 후 반환하는 첫번째 방법
Ajax_board
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Ajax_board extends CI_Controller{ function __construct() { parent::__construct(); } /* Ajax 테스트 */ public function test() { $this->load->view('ajax/test_v'); } public function ajax_action() { echo '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />'; $name=$this->input->post("name"); echo $name."님 반갑습니다.!"; } public function ajax_comment_add() { if(@$this->session->userdata('logged_in')==TRUE) { $this->load->model('board_m'); $table=$this->input->post("table", TRUE); $board_pid=$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_pid, //원글 번호 'subject'=>'', 'contents'=>$comment_contents, 'user_id'=>$this->session->userdata('username') ); //echo implode(',' ,$write_data); $result =$this->board_m->insert_comment($write_data); if($result) { //글 작성 성공 시 댓글 목록 만들어 화면 출력 $sql= " select * FROM ci_board where board_pid = ? order by board_id desc "; $query=$this->db->query($sql , array( '0' => $board_pid ) ); //$data=$query->result(); //echo json_encode($data); 1개의 데이터 //echo json_encode($data); $data['comment']=$query->result(); $this->load->view('board/ajax_commment_v', $data); } else { //글 실 패시 echo "글 작성에 실패 하였습니다."; } } else { //글 내용이 없을 경우 echo "댓글 내용을 입력하세요."; } } else { //로그인 필요 에러 echo "로그인하여야 합니다."; } } }
다음 과 같이 ajax_comment_v.php 페이지를 만들어 데이터를 넘긴다.
ajax 에서 성공시 ajax_comment_v.php 페이지를 가져와서 html(ajax_comment_v.php데이터 ) 로 데이터를 넘겨 뿌려준다.
ajax_comment_v.php
<table cellpadding="0" cellspacing="0" class="table table-striped"> <tbody> <?php foreach ($comment as $lt) { ?> <tr> <th scope="row"> <?php echo $lt->user_id; ?> </th> <td><?php echo $lt->contents; ?></td> <td><?php echo $lt->reg_date; ?></td> <td><a href="">삭제</a></td> </tr> <?php } ?> </tbody> </table>
view_v.php
<form class="form-horizontal" method="post" action="/todo/board/write" 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><?php echo $lt->reg_date; ?></td>
<td>
<a href="#" onclick="javascript:comment_delete('<?php echo $lt->board_id; ?>')"><i class="icon-trash"></i>삭제</a></td>
</tr>
<?php
}
?>
</table>
</div>
</article>
<script type="text/javascript">
$(function(){
$("#comment_add").click(function(){
var comment_contents=encodeURIComponent($("#input01").val()) ;
var csrf_test_name=getCookie('csrf_cookie_name');
var table ="ci_board";
var board_id =<?php echo $this->uri->segment(3); ?>;
console.log("comment_contents : " + comment_contents + " csrf_test_name : " +csrf_test_name + " table : " +table + " board_id : " + board_id);
$.ajax({
url: "/todo/ajax_board/ajax_comment_add",
type:"POST",
data:{
"comment_contents" :comment_contents,
"csrf_test_name" :csrf_test_name,
"table":table,
"board_id":board_id
},
dataType:"html",
success:function(data, status){
//1. 첫번째 방법
$("#comment_area").html(data);
//2.두번째 방법
//onSuccess(data,status);
$("#input01").val('');
},
error:function(xhr){
alert("댓글 에러");
}
});
});
});
function getCookie( name )
{
var nameOfCookie = name + "=";
var x = 0;
while ( x <= document.cookie.length )
{
var y = (x+nameOfCookie.length);
if ( document.cookie.substring( x, y ) == nameOfCookie ) {
if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
endOfCookie = document.cookie.length;
return unescape( document.cookie.substring( y, endOfCookie ) );
}
x = document.cookie.indexOf( " ", x ) + 1;
if ( x == 0 )
break;
}
return "";
}
</script>
codeIgniter CSRF ajax 처리시 getCookie 함수를 사용해서 처리한다.
다음 함수 값만 있으면 된다.
var csrf_test_name=getCookie('csrf_cookie_name');
function getCookie( name ) { var nameOfCookie = name + "="; var x = 0; while ( x <= document.cookie.length ) { var y = (x+nameOfCookie.length); if ( document.cookie.substring( x, y ) == nameOfCookie ) { if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 ) endOfCookie = document.cookie.length; return unescape( document.cookie.substring( y, endOfCookie ) ); } x = document.cookie.indexOf( " ", x ) + 1; if ( x == 0 ) break; } return ""; }
2. 두번째 방법 데이터 1개를 json 리턴 한 후 prepend 로 붙이는 방법
만약 88 번 레코드만 가져온다면
$query->result() 를 jsson_encode 처리 한다.
if($result) { //글 작성 성공 시 댓글 목록 만들어 화면 출력 $sql= " select * FROM ci_board where board_pid = 88 order by board_id desc "; $query=$this->db->query($sql , array( '0' => $board_pid ) ); $data=$query->result(); echo json_encode($data); // 1개의 데이터 //echo json_encode($data); //$data['comment']=$query->result(); //$this->load->view('board/ajax_commment_v', $data); } function onSuccess(data2, status){ console.log(data2); var answerTemplate =$("#answerTemplate").html(); var data =JSON.parse(data2); console.log("json 길이 : " +data.length); console.log(" json - " + data[0].user_id +" : " + data[0].contents + " : "+ data[0].reg_date); var template =answerTemplate.format(data[0].user_id, data[0].contents, data[0].reg_date); $("#comment_area").prepend(template); }
템를릿 파싱 tring.prototype.format = function() 사용해서 데이터를 {0 }, ~ {끝} 까지 파싱한다.
이때 데이터 값은 json 값이 아니라 실질적인 데이터 값이다.
1. 자바스크립트 함수 코딩 :
String.prototype.format = function() { var formatted = this; for (var i = 0; i < arguments.length; i++) { var regexp = new RegExp('\\{'+i+'\\}', 'gi'); formatted = formatted.replace(regexp, arguments[i]); } return formatted; }
2. 템플릿에서 {0} ~ 순서대로 넣으주면 된다.
<script type="text/template" id="answerTemplate"> <tr> <th scope="row"> {0} </th> <td>{1}</td> <td>{2}</td> <td><a href="">삭제</a></td> </tr> </script>
3. 데이터 삽입 처리 방법
var answerTemplate =$("#answerTemplate").html(); template +=answerTemplate.format(data[i].user_id, data[i].contents, data[i].reg_date); $("#comment_area").html(template);
위 처리만 하면 된다. 특별한 라이브러리 삽입은 없다.
3. 세번째 방법 리스트 데이터를 json 으로 encoding 한후 for 문으로 돌려 html 로 붙이는 방법
function onSuccess2(data2, status){ console.log(data2); var answerTemplate =$("#answerTemplate").html(); var data =JSON.parse(data2); var template='<table cellspacing="0" cellpadding="0" class="table table-striped" id="comment_table">'; for(var i=0; i< data.length; i++){ template +=answerTemplate.format(data[i].user_id, data[i].contents, data[i].reg_date); } template +="</table>"; $("#comment_area").html(template); }
전체 view_v.php 코드
<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="/todo/board/lists/<?php echo $this->uri->segment(3);?>/page/<?php echo $this->uri->segment(7);?>" class="btn btn-primary">목록</a> <a href="/todo/board/modify/board_id/<?php echo $this->uri->segment(3);?>/<?php echo $this->uri->segment(4);?>page/<?php echo $this->uri->segment(6);?>" class="btn btn-warning">수정</a> <a href="/todo/board/delete/board_id/<?php echo $this->uri->segment(3);?>/<?php echo $this->uri->segment(4);?>/page/<?php echo $this->uri->segment(6);?>" class="btn btn-danger">삭제</a> <a href="/todo/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="/todo/board/write" 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><?php echo $lt->reg_date; ?></td> <td> <a href="#" onclick="javascript:comment_delete('<?php echo $lt->board_id; ?>')"><i class="icon-trash"></i>삭제</a></td> </tr> <?php } ?> </table> </div> </article> <script type="text/template" id="answerTemplate"> <tr> <th scope="row"> {0} </th> <td>{1}</td> <td>{2}</td> <td><a href="">삭제</a></td> </tr> </script> <script type="text/javascript"> $(function(){ $("#comment_add").click(function(){ var comment_contents=encodeURIComponent($("#input01").val()) ; var csrf_test_name=getCookie('csrf_cookie_name'); var table ="ci_board"; var board_id =<?php echo $this->uri->segment(3); ?>; console.log("comment_contents : " + comment_contents + " csrf_test_name : " +csrf_test_name + " table : " +table + " board_id : " + board_id); $.ajax({ url: "/todo/ajax_board/ajax_comment_add", type:"POST", data:{ "comment_contents" :comment_contents, "csrf_test_name" :csrf_test_name, "table":table, "board_id":board_id }, dataType:"html", success:function(data, status){ //1. 첫번째 방법 //$("#comment_area").html(data); //2.두번째 방법 onSuccess(data,status); $("#input01").val(''); }, error:function(xhr){ alert("댓글 에러"); } }); }); }); function getCookie( name ) { var nameOfCookie = name + "="; var x = 0; while ( x <= document.cookie.length ) { var y = (x+nameOfCookie.length); if ( document.cookie.substring( x, y ) == nameOfCookie ) { if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 ) endOfCookie = document.cookie.length; return unescape( document.cookie.substring( y, endOfCookie ) ); } x = document.cookie.indexOf( " ", x ) + 1; if ( x == 0 ) break; } return ""; } function onSuccess(data2, status){ console.log(data2); var answerTemplate =$("#answerTemplate").html(); var data =JSON.parse(data2); console.log("json 길이 : " +data.length); console.log(" json - " + data[0].user_id +" : " + data[0].contents + " : "+ data[0].reg_date); var template =answerTemplate.format(data[0].user_id, data[0].contents, data[0].reg_date); $("#comment_area").prepend(template); } function onSuccess2(data2, status){ console.log(data2); var answerTemplate =$("#answerTemplate").html(); var data =JSON.parse(data2); var template='<table cellspacing="0" cellpadding="0" class="table table-striped" id="comment_table">'; for(var i=0; i< data.length; i++){ template +=answerTemplate.format(data[i].user_id, data[i].contents, data[i].reg_date); } template +="</table>"; $("#comment_area").html(template); } String.prototype.format = function() { var formatted = this; for (var i = 0; i < arguments.length; i++) { var regexp = new RegExp('\\{'+i+'\\}', 'gi'); formatted = formatted.replace(regexp, arguments[i]); } return formatted; } </script>
댓글 ( 4)
댓글 남기기