CakePHP 4 中实现Ajax数据传输与JSON响应

use Cake\Routing\RouteBuilder;
use Cake\Routing\Router;
use Cake\Routing\Route\DashedRoute;

// ... 其他路由配置 ...

Router::scope('/', function (RouteBuilder $routes) {
    // 为API请求添加前缀，并允许JSON扩展
    $routes->prefix('Api', function (RouteBuilder $routes) {
        $routes->setExtensions(['json']); // 允许通过 .json 扩展名请求JSON格式数据
        $routes->fallbacks(DashedRoute::class); // 使用破折号路由，例如 /api/countries/get-all
    });

    // ... 其他路由定义 ...
});

<?php
declare(strict_types=1);

namespace App\Controller\Api;

use App\Controller\AppController; // 确保引入基础控制器

/**
 * Countries Controller
 *
 * @property \App\Model\Table\CountriesTable $Countries
 */
class CountriesController extends AppController
{
    /**
     * getAll method
     *
     * @return \Cake\Http\Response|null|void
     */
    public function getAll()
    {
        // 从数据库中获取国家数据，并包含PLZ（邮政编码）信息
        $countries = $this->Countries->find('all', [
            'contain' => ['PLZ'] // 假设Countries模型与PLZ模型存在关联
        ])->toList(); // 将查询结果转换为数组或集合

        // 将数据包装在一个数组中，以便在响应中有一个明确的键
        $data = [
            'countries' => $countries,
            'message' => '数据获取成功', // 可以添加额外信息
            'status' => 'success'
        ];

        // 将要序列化的数据传递给视图
        $this->set(compact('data'));

        // 告诉CakePHP序列化'data'变量为JSON响应，而不是渲染视图
        $this->viewBuilder()->setOption('serialize', ['data']);
    }
}

$.ajax({
    type: 'get',
    // 修改URL以匹配API路由，并指定期望的JSON格式
    url: '/api/countries/getall.json', // 注意这里的路径和 .json 扩展名
    beforeSend: function(xhr) {
        // 通常，当请求JSON时，Content-type 可能不是 application/x-www-form-urlencoded
        // 如果后端不需要特定 Content-type，可以省略此行或设置为 application/json
        // xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    },
    success: function(response) {
        // response 现在将是一个解析后的JSON对象
        console.log("接收到的数据:", response);
        if (response.status === 'success' && response.countries) {
            // 处理接收到的国家数据
            let countriesData = response.countries;
            let htmlContent = '<ul>';
            countriesData.forEach(function(country) {
                htmlContent += `<li>${country.name} (ID: ${country.id})</li>`;
                // 假设 country 对象有 name 和 id 属性
                // 如果包含 PLZ，可以进一步访问 country.plz[0].code 等
            });
            htmlContent += '</ul>';
            $('#target').html(htmlContent); // 将数据渲染到页面上的某个元素
        } else if (response.error) {
            alert(response.error);
            console.log(response.error);
        }
    },
    error: function(e) {
        alert("An error occurred: " + (e.responseJSON ? e.responseJSON.message : e.responseText));
        console.log(e);
    }
});