勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

CodeIgniter4 & jQueryを用いて同一サイト内でajax通信する方法

  PHP jQuery CodeIgniter JavaScript

CodeIgniter4.4.4 & jQueryを用いて同一サイト内でajax通信したい。まずは簡単にテキストボックスにID(数値)を入力しボタンをクリックすると、別ページにajax通信しID且つ現在日時を返し、レスポンスを正常に受け取れた場合はアラートで内容を表示させるプログラムを組みたい。以下に実装方法をメモ。

 

ルーティング設定

/app/Config/Routes.php

$routes->add('/ajax', 'Ajax_Controller::index');
$routes->post('/ajax/check', 'Ajax_Controller::check');

post指定することで普通にブラウザからページを開こうとしても404になる(post送信するとデータが返ってくる)。

 

Views

/app/Views/ajax/index.php

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajaxのテスト</title>
</head>
<body>

    <label for="test-id">ID</label>
    <input id="test-id" type="text">
    <input id="ajax-btn" type="button" value="Ajaxのテスト">

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
    $(function(){

        $('#ajax-btn').on('click', function(){

            const id = $('#test-id').val();
            if( !id ){
                alert('IDが入力されていません。');
                return false;
            }

            const ajax_data = {'id' : id};
            $.ajax({
                url:'./ajax/check',
                type: 'POST',
                headers: {'X-Requested-With': 'XMLHttpRequest'},
                data: ajax_data,

            }).done(function(result){
                const json_data = JSON.parse(result);

                //ステータスコードが200(成功)の場合
                if( json_data.status == 200 ){
                    const msg = `ID:${json_data.data.id}\nnow:${json_data.data.now}`;
                    alert(msg);

                //エラー時
                }else{
                    alert('エラーが発生しました。');
                }

            //ajax自体のエラー時
            }).fail(function() {
                alert('エラーが発生しました。');

            }).always(function() {
                //完了後の処理

            });
        });

    });
    </script>
</body>
</html>

 

Controllers

/app/Controllers/Ajax_Controller.php

<?php
namespace App\Controllers;

class Ajax_Controller extends BaseController
{
    public function index()
    {
        echo view('ajax/index');
    }

    public function check()
    {

        $return = array();

        do{
            //IDが送信されていない場合
            if( !$this->request->getPost('id') ){
                $return['status'] = 400; //ステータスコードは適宜変更
                break;
            }

            $return = array(
                'data' => array(
                    'id' => $this->request->getPost('id'),
                    'now' => date('Y-m-d H:i:s'), 
                ),
                'status' => 200,
            );
        }while(0);

        echo json_encode($return);

    }
}

 

所感

ajax通信で個人情報等、漏洩が怖いデータを取り扱うことは無いが、セキュリティ面を考慮しCSFR対策も入れといた方が良いかも。

 - PHP jQuery CodeIgniter JavaScript

  関連記事

CodeIgniter3で共通の変数と定数を設定する方法

CodeIgniter3系で共通する配列が入った変数と、定数を設定したかった。以 ...

CodeIgniter4でのメール送信方法(テキスト・HTMLメール)

CodeIgniter4.4.4でテキストメール及びHTMLメールを送信したい。 ...

CodeIgniter4でフォームからファイルをアップロードし保存する方法

CodeIgniter4.4.4でformから画像等のファイルをアップロードし、 ...

Codeigniter4でエラーログ設定、出力及び確認方法

Codeigniter4.4.4でエラーログの設定を行い特定のファイルに出力させ ...

CodeIgniter4で簡易版ログインシステムの実装方法(管理画面向け)

CodeIgniter4で管理画面向けの簡易版ログインシステムを作成したい。通常 ...