在CakePHP中使用ajax

前言

虽然国内开发已经不怎么用CakePHP了，但这个框架在日本还是有一定市场。希望这个笔记能帮到在日开发的小伙伴们。

实现效果

输入关键字后在下方显示检索结果，相当于一个单页应用

前提

阅读者已经拥有CakePHP和JS的基本知识

版本

CakePHP 3.6.1
PHP 7.4.10

准备

准备好controller和method
在使用ajax的界面导入js文件
修改js文件，实现前后端交互

- *
  开始
  后端
  创建Controller，Model和对应的Template

在<ProjectFolder>\src\Controller里创建Controller

namespace App\Controller;
use App\Controller\AppController;

class SentencesController extends AppController
{
  #class的初始化
    public $SentencesTable;
    public function initialize(): void
    {
        $this->loadComponent('RequestHandler');
    }
  
 #搜索函数
  public function search()
      {
          $this->autoRender = false;
          if ($this->request->is('ajax')) {
              $data = $this->request->getData();
              $results = $this->Sentences->find()->where([
                  'sentences_name LIKE' => '%' . $data['keyword'] . '%',
                  'template_available_lang LIKE' => '%' . $data['lang'] . '%'
                  ])->toList();
              if (is_null($results)) {
                  $results = '没有关联情报';
              } else {
                  //把数组转换成json，返回给前端
                  echo json_encode($results, JSON_UNESCAPED_UNICODE);
                  exit;
             }}
      }

在<ProjectFolder>\src\Model\Table里创建SentencesTable

<?php
namespace App\Model\Table;
use Cake\ORM\Table;
class SentencesTable extends Table
{
    public function initialize(array $config): void
    {
        parent::initialize($config);
        $this->setTable("sentences");
    }
}

在<ProjectFolder>\src\Template\Layout\下创建custom.ctp文件

<html>
<head>
    <title>search</title>
</head>
<body>
    <div class="grid">
          //搜索区
            <div id="searchArea">
                <input placeholder="请输入关键字" id="searchBox">
                <button id="searchButton">搜索</button>
            </div>
          //结果区
            <div id="result-list">
            </div>
    </div>
</body>
  //在最后导入js文件
  <?=
  $this->Html->script([
      "serach.js",
  ]);
  ?>
</html>

4.修改HomeController.php文件，指定模板为以上custom模板

<?php 
namespace App\Controller;
use App\Controller\AppController;
class HomeController extends AppController{
    public function initialize():void{
        parent::initialize();
    }
    public function index(){
      //指定使用模板
        $this->viewBuilder()->setLayout("custom");
    }
}

在Template文件夹下创建index的ctp文件（因为指定了模板，此文件为空白即可）

在routes.php中添加路由

$routes->connect('/search', ['controller' => 'Sentences', 'action' => 'search']);

后端处理到此全部完成

前端

在<project>\webroot\js\文件夹里创建search.js

//按搜索后，获取用户输入关键字并进行搜索
    $("#searchButton").click(function() {
        var rawQuery = $("#searchBox").val();
      $.ajax({
          url: "../search",
          method: 'POST',
          dataType: 'json',
          data: {
          keyword: rawQuery
      },
      //成功时的处理，先在命令台检查
      success: function(response) {
     for (var i = 0; i < response.length; i++) {
                  //这里的sentence_name是sentence的其中一个属性
                  console.log(response[i].sentence_name）
              }
          },
     //失败时的处理 
     error: function(XMLHttpRequest, textStatus, errorThrown) {
          console.log('Error : ' + errorThrown + "\n" +
          XMLHttpRequest.status + "\n" +
          XMLHttpRequest.statusText + "\n" +
          textStatus);
      }
      });
    });

测试一下，成功的话会获得json数据

修改success后的函数处理，把json数据转换为html
*response[i].后的均为属性

success: function (response) {
           for (var i = 0; i < response.length; i++) {
           console.log(response[i].template_name);
           var tr_str = "<tr data-value='" +
            response[i].title_transfer_flg + "' class='category' id='" + response[i].template_category_id + "'>                                  <td class='list-item' id=" + response[i].id + ">" + response[i].template_name + "                                               <button class='btn' id='title-btn' href='#'>件名にする</button></td></tr>";
        //插入到现有的div中    
        $("#result-list").append(tr_str);
                }
            },

最后效果

在CakePHP中使用ajax

前言

实现效果

前提

版本

准备

开始

后端

前端

chiiinnn

引用和评论

python里打印list的四种方法

如何实现一个楼中楼的评论系统

Just for fun——迅速写完快速排序

这些年

php-fpm reload 会取消正在处理的请求的解决方案

一个用JavaScript生成思维导图(mindmap)的github repo

从零开始 Elasticsearh Docker 单机集群