CakePHP 4 中通过 Ajax 从控制器发送 JSON 数据到视图的教程

// config/routes.php

use Cake\Routing\RouteBuilder;
use Cake\Routing\Router;
use Cake\Routing\Route\DashedRoute; // 确保引入 DashedRoute

Router::scope('/', function (RouteBuilder $routes) {
    // ... 其他路由配置 ...

    // 定义一个 'Api' 前缀的路由范围
    $routes->prefix('Api', function (RouteBuilder $routes) {
        // 启用 JSON 扩展，这意味着 /api/countries/getall.json 将被识别为 JSON 请求
        $routes->setExtensions(['json']);
        // 允许使用破折号命名空间的路由，例如 Api/CountriesController
        $routes->fallbacks(DashedRoute::class);
    });

    // ... 其他路由配置 ...
});

// src/Controller/Api/CountriesController.php

namespace App\Controller\Api;

use App\Controller\AppController; // 确保引入 AppController

class CountriesController extends AppController
{
    /**
     * 获取所有国家及其邮政编码的 API 动作
     *
     * @return \Cake\Http\Response|null
     */
    public function getAll()
    {
        // 从数据库中查找所有国家，并包含关联的 PLZ (邮政编码) 数据
        $countries = $this->Countries->find('all', [
            'contain' => ['PLZ'] // 假设 Countries 模型与 PLZ 模型存在关联
        ])->toArray(); // 将结果转换为数组，以便于 JSON 序列化

        // 将查询结果包装在一个 'data' 键下，这是推荐的做法，
        // 尤其是在 API 响应中保持一致的数据结构
        $responseData = [
            'countries' => $countries,
            'message' => '数据获取成功' // 可以添加额外的信息
        ];

        // 将数据设置到视图变量中
        $this->set(compact('responseData'));

        // 告诉 CakePHP 视图构建器，将 'responseData' 变量序列化为 JSON
        // 这将阻止 CakePHP 尝试渲染一个视图文件
        $this->viewBuilder()->setOption('serialize', ['responseData']);
    }
}

// template/countries/index.php (或任何前端 JavaScript 文件)

$(document).ready(function() {
    $.ajax({
        type: 'get',
        // 修改 URL 以匹配新的 API 端点
        url: '/api/countries/getAll.json', 
        // 推荐显式设置 dataType 为 'json'，jQuery 会自动解析
        dataType: 'json', 
        beforeSend: function(xhr) {
            // 对于 GET 请求，通常不需要设置 Content-type
            // 如果是 POST/PUT 请求，且发送 JSON 数据，则应设置为 'application/json'
            // xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        },
        success: function(response) {
            // 检查响应数据结构
            if (response && response.countries) {
                console.log('成功获取国家数据:', response.countries);
                // 示例：将数据显示在页面上
                let htmlContent = '<ul>';
                response.countries.forEach(function(country) {
                    htmlContent += `<li>${country.name} (ID: ${country.id})`;
                    if (country.plz && country.plz.length > 0) {
                        htmlContent += ` - PLZ: ${country.plz.map(p => p.code).join(', ')}`;
                    }
                    htmlContent += `</li>`;
                });
                htmlContent += '</ul>';
                $('#target').html(htmlContent); // 假设页面上有一个 ID 为 'target' 的元素
            } else if (response && response.message) {
                alert(response.message);
                console.log(response.message);
            } else {
                alert("未知响应格式");
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.error("发生错误:", textStatus, errorThrown);
            alert("An error occurred: " + jqXHR.responseText);
            console.log(jqXHR);
        }
    });
});