【CakePHP入門】Ajaxを使用する方法をわかりやすく解説!

こんにちは。ライターの亀田です。

今回は、Webで良く用いられる非同期通信の仕組みであるAjaxについて説明します。

AjaxはjQueryの機能の一つで、Webアプリでは非常に頻繁に用いられる手法です。

CakePHP3でアプリを開発する際にも当然のことながら必要となってきます。

ここでは、

・Ajaxとは

で、Ajaxの概念について説明し、その後で

・jQueryのAjaxを使用する方法
・AjaxのPOST送信処理

で、実際にCakePHP3でいかに利用していくかについて解説していくことにします。

Ajaxとは

Ajaxとは、Asynchronous JavaScript+XMLの略称で、一般には、エイジャックスと呼ばれます。

冒頭にも説明したとおり、JavaScript(jQuery)を利用したサーバーの間の非同期データ通信を行う仕組みです。

その正式名称から判るとおり、JavaScriptとXMLによって通信を行いますが、JSONでも同じことをすることが出来ます。

Ajaxを使ったシステムとして有名なものとしては、Googleマップがあります。

Ajaxを用いると、ページ遷移を行わずに画面やデータベースの内容の更新を行うことが出来るのが特徴です。

ですから、ブラウザゲームのように、リアルタイム性の高いWebアプリでは非常に良く用いられます。

なお、JSONに関しては以下で詳しく説明しています。ぜひ参考にしてみてください!

【PHP入門】JSONのデータを処理する方法(json_encode/json_decode)
更新日 : 2018年12月21日

jQueryのAjaxを使用する方

ここでは、入力したテキストを画面遷移を行わずにデータベースを保存するという処理をしていくことにします。

まずは以下のようにして、テーブルを作ってください。

CREATE TABLE DATA(
    id INT AUTO_INCREMENT PRIMARY KEY,
    text VARCHAR(255)
);

なお、データベースの設定や、SQLの操作に関しては以下を参考にしてください。

【CakePHP入門】SQL(データベース)の基本を理解しよう!
更新日 : 2019年3月10日

完成したデータは、ID(id)と文章(text)だけの非常にシンプルなものです。

データが完成したら、コントローラおよびビューのctpファイルを以下のようにしてください。

/src/Corntroller/DataController.php

<?php
namespace App\Controller;
 
use App\Controller\AppController;
use Cake\Datasource\ConnectionManager;
use Cake\Event\Event;
 
class DataController extends AppController
{

  public function add(){
    $data = $this->request->data('request');
    $connection = ConnectionManager::get('default');
    $connection->insert('data', [ 'text' => $data ]);

  }
  public function index()
  {
    $this->set('ajax_name','send_data.js');
  }
}

src/Template/Data/index.ctp

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>jQuery・Ajax・Cake</title>
    <?php
    // Ajax 送信用の JavaScript を読み込み
    echo $this->Html->script('http://code.jquery.com/jquery-1.11.3.min.js');
    //echo $this->Html->script('send_data');
    echo $this->Html->script($ajax_name);
    ?> 
</head>
<body>
    <h1>jQuery・Ajax・Cake</h1>
<?php
    echo $this->Form->create ("null",[ "type" => "post"]);
    echo $this->Form->textarea("textdata",['cols'=> 20, 'rows' => 4,'id' => 'textdata']);
    echo $this->Form->submit('送信',['id' => 'send']);
    echo $this->Form->end (); 
?>
</body>
</html>

なお、同じ場所に、何もしないadd.ctpを追加して置いてください。

src/Template/Data/add.ctp

<p>このページは表示されません!</p>

本来ならこのページは表示する必要はありません。

しかし、ページ遷移が起こらないことを確認するために、あえて用意します。

最後に、ajaxの処理をするjavascriptを配置します。場所は、webroot/js/です。urlの部分は、プロジェクトにあわせて、任意に変更してください。

webroot/js/send_data.js

$(document).ready(function()
{
    /**
     * 送信ボタンクリック
     */
    $('#send').click(function()
    {
        var data = { request : $('#textdata').val() };
        alert( $('#textdata').val() );
        /**
         * Ajax通信メソッド
         * @param type  : HTTP通信の種類
         * @param url   : リクエスト送信先のURL
         * @param data  : サーバに送信する値
         */
        $.ajax({
            type: 'POST',
            datatype:'json',
            url: "http://localhost/[プロジェクト名]/data/add",
            data: data,
            success: function(data,dataType)
            {         
                alert('Success');
            },
            /**
             * Ajax通信が失敗した場合に呼び出されるメソッド
             */
            error: function(XMLHttpRequest, textStatus, errorThrown)
            {
                alert('Error : ' + errorThrown);
            }
        });
        return false;
    });
});

基本的に、jQueyおよび、ajaxを用いる仕組みは普通のPHPでも、CakePHP3でもさほどかわりません。

完成したら、

http:localhost/[プロジェクト名]/data

にアクセスしてみてください。以下のような画面が出ます。

ajax
テキストエリアに文字列を入力して、「送信」ボタンを押してみてください。

見た目では変化はわかりませんが、phpmyadminを見ると、dataテーブルにはここに入力したデータが次々と投入されていることがわかります。

phpmyadmin

このような処理は、ajaxを使わなくてもCakePHPのみで実現できますが、ページ遷移がおこります。

AjaxのPOST送信処理

では、次にこの仕組みを詳しく説明しておくことにしましょう。

「送信」ボタンを押すとjsファイルのイベントが起動し、まずテキストエリアの文字列を読み出しに行きます。

var data = { request : $('#textdata').val() };

javascriptでは、このように記述したデータ形式は、JSONデータとして扱われます

requestキーに対して、$('#textdata').val() で取得したデータが値として保持されます。

このデータは、テキストエリアのデータなので、テキストエリアのデータに、requestというタグをつけて、json形式のデータとして送る準備をしているのです。

送信に関する部分は、

            type: 'POST',
            datatype:'json',
            url: "http://localhost/[プロジェクト名]/data/add",
            data: data,

となっています。指定したURLに、dataと言うデータをポスト送信すると言う意味です。データはあらかじめjsonデータで保存したため、datatypeはjsonと指定します。

なお、JSONはしばしばCakePHPで利用します。詳しく知りたい方は、こちらをご覧ください。

【CakePHP入門】JSON形式のデータを出力する方法
更新日 : 2019年5月23日

これを受けて、DataControllerのaddメソッドが呼び出されます。

    $data = $this->request->data('request');
    $connection = ConnectionManager::get('default');
    $connection->insert('data', [ 'text' => $data ]);

まず。POST送信されてきたデータから、requestキーのあるデータ、つまりajaxで送られてきたデータを取得し、$dataに代入します。

そして、データベースに接続して、insert文でdataテーブルに挿入します。(カラムはtext)

すでに説明した通り、この処理は非同期通信処理なのでページ遷移は行われません。

受取ったデータをそのままデータベースに保存する処理だけが実行されます。

以上がこのシステムの仕組みです。

この方法を用いればページ遷移を伴わないデータの保存が可能になります。

まとめ

ここでは、CakePHP3でajaxを扱うために、

・Ajaxとは
・jQueryのAjaxを使用する方法
・AjaxのPOST送信処理

といった流れで解説しました。

これにより、CakePHP3でajaxを使えば簡単に非同期通信ができることがわかりました。

もしも、ajaxで何らかの通信の処理をしたいときは、この記事を参考にしてみてください。

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

亀田

亀田

エンジニアとして独自の製品やサービスを開発する傍ら、エンジニア教育にも力を入れています。企業研修や専門学校での非常勤講師もしながら、独自の言語学習サイト「一週間でわかるシリーズ」を運営し、エンジニアになりた人をサポートする活動をライフワークにしています。
【一週間で学べるシリーズ】
http://sevendays-study.com/

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説