在CakePHP中使用ajax

前言

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

实现效果

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

result.gif

前提

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

版本

CakePHP 3.6.1
PHP 7.4.10

准备
  1. 准备好controller和method
  2. 在使用ajax的界面导入js文件
  3. 修改js文件,实现前后端交互
    • *

      开始
      后端

      创建Controller,Model和对应的Template

  • \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;
                 }}
          }
  • \src\Model\Table里创建SentencesTable

    setTable("sentences");
        }
    }
  • \src\Template\Layout\下创建custom.ctp文件

    
    
        search
    
    
        
              //搜索区
                
                    
                    搜索
                
//结果区                          
    
//在最后导入js文件 Html->script([ "serach.js", ]); ?>

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

viewBuilder()->setLayout("custom");
    }
}
  • 在Template文件夹下创建index的ctp文件(因为指定了模板,此文件为空白即可)
  • 在routes.php中添加路由

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

    后端处理到此全部完成

    前端
  • \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数据
    image.png

    1. 修改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 = "                                  " + response[i].template_name + "                                               件名にする";
              //插入到现有的div中    
              $("#result-list").append(tr_str);
                      }
                  },
      
      

      最后效果

    你可能感兴趣的:(cakephpphpajax)