CodeIgniter3
19. [CodeIgniter3] jQuery Ajax를 이용하여 데이터 조회하기
drizzle0925
2022. 1. 5. 12:48
728x90
이전 포스팅에서는 Ajax를 이용하여 데이터를 추가하는 방법을 알아보았습니다.
이번에는 Ajax를 이용하여 사용자 이름에 같은 데이터가 존재하는지 확인하는 코드를 만들어보겠습니다.
Controller
application/controllers/AjaxController.php 파일에 다음 코드를 입력합니다.
<?php
class AjaxController extends CI_Controller
{
public function index()
{
$this->load->view('Ajaxform');
}
public function savedata()
{
$data = array(
'name' => $this->input->post('name'),
'email' => $this->input->post('email'),
'course' => $this->input->post('course')
);
$this->load->model('AjaxModel');
$result = $this->AjaxModel->saveData($data);
if($result)
{
echo 1;
}
else
{
echo 0;
}
}
public function checkUser()
{
$email = $this->input->post('email');
$this->load->model('AjaxModel');
$result = $this->AjaxModel->checkuser($email);
if($result)
{
echo 1;
}
else
{
echo 0;
}
}
}
?>
Model
application/models/AjaxModel.php 파일에 아래 코드를 입력합니다.
<?php
class AjaxModel extends CI_Model
{
public function saveData($data)
{
if($this->db->insert('student', $data))
{
return 1;
}
else
{
return 0;
}
}
public function checkuser($email)
{
$this->db->where('email', $email);
$query = $this->db->get('student');
if($query->num_rows()>0)
{
return 1;
}
else
{
return 0;
}
}
}
?>
View
application/views/Ajaxform.php 파일에 아래 코드를 입력합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>save data using Ajax</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
</head>
<body>
<div class="container">
<h1 align="center">Ajax Form using CI</h1>
<div class="form-group">
<label for="name">Enter Your Name:</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Enter Name" />
</div>
<div class="form-group">
<label for="email">Enter Your Email:</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Enter Email" />
<div id="msg"></div>
</div>
<div class="form-group">
<label for="course">Enter Your Course:</label>
<input type="text" name="course" id="course" class="form-control" placeholder="Enter course">
</div>
<input type="button" value="save data" class="btn btn-primary" id="butsave" />
</div>
<script type="text/javascript">
// Ajax post
$(document).ready(function()
{
// blur() 대상 엘리먼트가 포커스를 잃었을 때 이벤트를 처리하는 이벤트 핸들러
$("#email").blur(function(){
let email = $("#email").val();
if(email != "")
{
jQuery.ajax({
type: "POST",
url: "<?php echo base_url('/AjaxController/checkUser'); ?>",
dataType: "html",
data: {email: email},
success: function(res)
{
if(res == 1)
{
$("#msg").addClass("invalid-feedback");
$("#msg").css({"display":"block"});
$("#msg").html("This email already exists");
}
else
{
$("#msg").addClass("valid-feedback");
$("#msg").css({"display":"block"});
$("#msg").html("Congrates email available!");
}
},
error:function()
{
alert('some error');
}
});
}
else
{
alert("pls enter your email id");
}
});
$("#butsave").click(function()
{
let name = $("#name").val();
let email = $("#email").val();
let course = $("#course").val();
if(name != "" && email != "" && course != "")
{
jQuery.ajax({
type: "POST",
url: "<?php echo base_url('/AjaxController/savedata'); ?>",
dataType: 'html',
data: {name: name, email: email, course:course},
success: function(res)
{
if(res == 1)
{
alert('Data saved successfully');
}
else
{
alert('Data not saved');
}
},
error: function()
{
alert('data not saved');
}
});
}
else
{
alert("pls fill all fields first");
}
});
});
</script>
</body>
</html>
아래 URL로 이동합니다.
localhost/AjaxController/
student 테이블의 email 칼럼에 등록된 이메일을 적으면 아래와 같이 표시됩니다.
Github : https://github.com/jun0925/study/commit/fc069b3eb34c487fb31d4d4a72714e4a217eb0cd
728x90