头图

在CakePHP中使用ajax

chiiinnn
前言

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

实现效果

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

result.gif

前提

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

版本

CakePHP 3.6.1
PHP 7.4.10

准备
  1. 准备好controller和method
  2. 在使用ajax的界面导入js文件
  3. 修改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数据
    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 = "<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);
                    }
                },
    
    

    最后效果
    image.png

阅读 313
4 声望
0 粉丝
0 条评论
你知道吗?

4 声望
0 粉丝
文章目录
宣传栏