CodeIgniter3

18. [CodeIgniter3] jQuery Ajax를 사용하여 데이터 추가

drizzle0925 2022. 1. 5. 09:29
728x90

CodeIgniter에서 jQuery Ajax를 사용하여 데이터를 추가하는 방법에 대해서 알아봅시다.

이번 예제에서는 Ajax를 이용한 데이터 전송, 유효성 검사, 제출 처리기 메서드를 사용해 볼 생각입니다.

클라이언트 측에서 양식 데이터의 유효성을 검사하여 전체 페이지를 새로 고치지 않고 작업을 처리합니다.

CodeIgniter jQuery Ajax Post Data 메서드를 사용하면 페이지를 새로 고치지 않고도 데이터를 게시하고 해당 데이터를 반환하기가 정말 쉽습니다. 

 

먼저 라이브러리(데이터베이스), 헬퍼(form, url)를 로드해야 합니다.

(autoload를 사용하지 않고 생성자에서 로드해도 됩니다.)

$autoload['helper'] = array('form', 'url');
$autoload['libraries'] = array('database');

 

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;
        }
    }
}
?>

 

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;
        }
    }
}
?>

 

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>
        <div class="form-group">
            <label for="email">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()
        {
            $("#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>

 

아래 주소로 접속합니다.

localhost/AjaxController/

 

내용을 입력하고 save data 버튼을 클릭합니다.

 

데이터가 저장되었습니다.

 

데이터베이스에서 확인해봅니다.

 

Github : https://github.com/jun0925/study/commit/886e68b9a5c68f65d71a67d2b1685693091f355e

728x90