Cakephp3とjQueryでajaxのjson形式での通信

Question

検索フォームに文字を入力しはじめると、
MySQLのテーブルに登録された用語をlike句で検索して、検索候補になるような仕組みを作ろうと考えています。

jQueryでkeyupイベント時に通信し始めるものを作っているのですが、datatypeがhtmlの場合は（.doneの方が使われる）のですが、
jsonの場合はerrorが返ってきます。json形式でやるべきことは何でしょうか。

したこと

AppController.php

  public function initialize()
    
{
        
	parent::initialize();
	$this->loadComponent('RequestHandler');//追加
	//略
}

route.php

Router::extensions(['json', 'xml']);//追加

jsファイル

$(function() {
    $('.search').on("keyup",function(){//keyup

        $.ajax({
            url: "/words/registered",
            type: "post",
            dataType: "json",//ここがhtmlの時は.doneが使われる
            data: {
              words : $(".search").val()
            }
        }).done(function (data) {
	alert("success");
	}).fail(function (data) {
	alert("error");
        });
    });
});

コントローラ

class WordsController extends AppController
{
  public function beforeFilter(Event $event) {
        if (in_array($this->request->action, ['registered'])) {
            $this->eventManager()->off($this->Csrf);
        }
    }
  public function registered(){
    $this->autoRender = false;//json形式で返すため、レンダー機能を無効化
    if ($this->request->is("ajax")) {
        $texts = ["hoge","piyo","huga"];


        $this->response->charset('UTF-8');
        $this->response->type('json');
      return json_encode($texts);

    }

  }

Answer 1

単純に出力したい場合は、returnではなくechoを使います。

// コントローラー
echo json_encode($texts);

もしくはCakePHP3の機能を使ってjsonを返すことができます。

// コントローラー
$this->set('texts', $texts);
$this->set('_serialize', ['texts']);

この場合$this->autoRender = false;は必要ありません。
またechoで出力するときと違いtextsという階層が1つ増えます。

表示を確認したい場合は、$this->viewBuilder()->className('Json');を加えると、URLで直接アクセスしたときにjsonを確認することができます。
（$this->viewClass = 'Json';はバージョン3.1.0でDeprecated）

なお、質問文中のroutes.phpでjsonを指定するのは、～～/hoge.jsonという形でアクセス（取得）することができるようにするためです。
routes.phpを設定せずに～～/hogeとアクセスしても構いません。

Comments

[yajin]

ありがとうございます。実装できました。

アルゴリズム的に以下になってるのですが、もうちょっと良い方法はありますか？

方法は、
１、keyup時に検索窓の文字のvalをjsonで送信。
２、ajax判定をして、ajaxならlike句で検索。
３、5件～6件ほど取得
４、jqueryにてdatalistの子要素optionをempty()で初期化、for文でapendで追加していく。

です。レンダリングがすこしぎこちないというか、文字をうったらすぐ反応してくれることもあれば、ちょっと待つこともあったりします。
開発環境がvagrantだからでしょうか？
最後の、echoの意味がよくわからないので、echoの使い方について補足説明していただければ幸いです。

[coba-coba]

実装できてよかったです！
アルゴリズムとしては問題ないと思います。

ただ、気になる点はあるので、すでにご存じの場合は聞き流して頂きたいのですが、思い当たることを書いてみます。
長くなります。すみません。

[echo]
echoを使う理由は、サーバーサイドのPHPからクライアントサイドのJavaScriptに変数を直接渡すことはできないため、echoでデータを出力する必要があるためです。

反応速度が遅いのはいくつか原因がありそうですね。

[vagrant]
１．vagrant
おっしゃる通り開発環境がvagrantであることも原因の1つかもしれません。
リソースや設定次第ですので、これはなんとも言えませんね。

[データベース]
あと、データベースからのデータ取得の方法も原因かもしれません。
データの数やデータの量、検索方法で速度は大きく変わります。
そのあたりどういう構成でしょうか。

１．データベース（検索方法）
データの取得は一般的に完全一致か前方一致(例：'query%')でないと、データの取得に時間がかかります。
検索候補を取得するのに、後方一致（例：'%query'）や中間一致（例：'%query%'）を
使っていたら、かなり遅くなります。

中間一致で取得したい場合は、データベースに全文検索を導入するという手もあります。
私はSQLite3でしか試したことがありませんが、SQLite3ならFTSという全文検索用モジュールを使います。
全文検索を使うと、体感でわかるくらいかなり早くなります。

２．データベース（インデックス）
データによって変わりますが、インデックスを作成すると速くなる可能性があります。
ただし、レコード数が数万件くらいならあまり関係ありません。
検索候補は全て異なるものを登録していると思うので、インデックスを作成すると効果は出そうです。
ただし、検索には完全一致か前方一致である必要があります。後方一致や中間一致では意味がありません。

３．データベース（取得のタイミング）
検索フォームに文字を入力する時に、入力イベントがあるたびに毎回データベースにアクセスするのではなく、入力後に一定時間経過後（0.5秒後など）に検索するのもよさそうです。
データベースにアクセスする回数を減らせば、それだけ通信の負担が減らせますし。

４．データベース（先に全てのデータを取得）
データの数が少なかったり、セキュリティ的に問題なければ、ページを表示する際に検索候補を全て先に取得してしまう方法もあります。

[yajin]

ありがとうございます！
１，２は対策済です。前方一致です。
３、取得のタイミング
これは確かに検討の余地がありそうですね。かしこまりました。
４、数万種類ありますのでちょっと難しいと思います。

意外と時間がかからず解決できてよかったです。ありがとうございました。

Answer 2

returnで返すんじゃなくてjson_encodeしたものを$this->setして、
URLを"/words/registered.json"とかにしてみてはいかがでしょう？

Comments

[yajin]

ありがとうございます！
http://192.168.33.10:8888/コントローラ名/メソッド.json
でアクセスしたところ、エラーを吐いていたので、
use Cake\Event\Event;
を追加してみたところ、エラーを吐かなくなりました。
これは送信できてるということでよろしいのでしょうか？

[yajin]

粘り続けたところ、無事実装できました。
ありがとうございます。

しかし、いざ動かして見るとちょっとぎこちない感じもします。
アルゴリズム的にこうしたほうがよいとのご指摘はありますか？

方法は、
１、keyup時に検索窓の文字のvalをjsonで送信。
２、ajax判定をして、ajaxならlike句で検索。
３、5件～6件ほど取得
４、jqueryにてdatalistの子要素optionをempty()で初期化、for文でapendで追加していく。

です。レンダリングがすこしぎこちないというか、文字をうったらすぐ反応してくれることもあれば、ちょっと待つこともあったりします。
開発環境がvagrantだからでしょうか？

[yajin]

デバッグの仕方が一番効果的だったのでこちらにさせていただきました。
ありがとうございます。