CodeIgniter에서 AJAX 사용하기
사원번호를 클릭할 때마다 jQuery를 이용한 AJAX 요청이 CodeIgniter에 전달되면 콘트롤러와 모델, 뷰 컴포넌트를 거쳐 사원정보를 JSON 포맷으로 응답한다
응답을 수신한 success 함수는 JSON 오브젝트를 사용하여 각 데이터가 표시될 위치에 출력하는 예이다
실행환경
웹서버 상의 CodeIgniter 루트에 css, js 등의 리소스 폴더를 생성하고 css 폴더에는 스타일시트 파일을 저장하고 js 폴더에는 jQuery.min.js 등의 자바스크립트 파일을 복사해둔다
emp 테이블
- empno INT # 사번
- ename VARCHAR(20) # 이름
- dname VARCHAR(20) # 부서
- sal INT # 급여
- pic VARCHAR(20) # 사진파일명
웹서버의 폴더 구조
- www : 웹서버 루트 폴더
- ciBoard 폴더 : CodeIgniter 구성파일 저장
- css : css 파일 저장
- js : jQuery 파일 저장
-application/controllers/Emp.php
-application/models/EmpModel.php
-application/views/emp.html, emp_json.php
콘트롤러 생성
ciBoard/application/controllers/Emp.php (요청 url : http://localhost/ciBoard/emp )
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Emp extends CI_Controller
{
public function __construct() {
parent::__construct();
$this->load->helper('url');
}
public function index() {
$this->load->view("emp.html");
}
function getInfo($num) {
$this->load->model('EmpModel');
$data = $this->EmpModel->getInfo($num);
$row = array('row'=>($data->row_array()));
$this->load->view('emp_json', $row);
}
}
모델 클래스 생성
ciBoard/application/models/EmpModel.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class EmpModel extends CI_Model
{
public function __construct() {
parent::__construct();
}
public function getInfo($num)
{
$sql = "SELECT * FROM emp WHERE empno=$num ";
$result = $this->db->query( $sql );
return $result;
}
}
뷰 파일
ciBoard/application/views/emp.html (요청 url : http://localhost/ciBoard/emp )
<!DOCTYPE html>
<html>
<head>
<title>사원정보 페이지</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function(){
alert('jQuery Ready!');
});
function requestEmpInfo(num) {
$.ajax({
url : '<?php echo base_url();?>emp/getinfo/'+num,
method: 'post',
data: { 'num' : num},
dataType : 'json',
success : function(res) {
//alert(res.ename);
$('#ename').html(res.ename);
$('#empno').html(res.empno);
$('#dname').html(res.dname);
$('#sal').html(res.sal);
$('#pic').html('<img src=\'images/'+res.pic+'\'>');
},
error: function(xhr, status, error){
console.log(xhr.status + ', '+xhr.responseText +', '+status+', '+error);
alert(status);
}
});
}
</script>
<style>
img { width: 200px; height:200px; }
</style>
</head>
<body>
<h3>사원정보</h3>
<div>이름 : <span id="ename"></span></div>
<div>번호 : <span id="empno"></span></div>
<div>부서 : <span id="dname"></span></div>
<div>급여 : <span id="sal"></span></div>
<div>사진 : <span id="pic"></span></div>
<div>
[<a href="javascript:requestEmpInfo(11);">11</a>]
[<a href="javascript:requestEmpInfo(12);">12</a>]
[<a href="javascript:requestEmpInfo(13);">13</a>]
[<a href="javascript:requestEmpInfo(14);">14</a>]
[<a href="javascript:requestEmpInfo(15);">15</a>]
</div>
</body>
</html>
JSON 문자열을 웹브라우저에 출력하는 뷰 콤포넌트
ciBoard/application/views/emp_json.php
<?php
echo json_encode($row);
