如何在Twig模板中通过Ajax调用PHP控制器函数

1. 统一入口文件（复用数据库连接） #

先把index.php作为所有请求的统一入口，这样就能复用ObserverController里的数据库连接，无需单独创建PHP文件：

<?php
// 引入项目依赖（数据库连接、Controller类等）
require_once 'path/to/your/db-connection.php';
require_once 'path/to/ObserverController.php';

$controller = new ObserverController();

// 根据请求参数分发到对应方法
$action = $_GET['action'] ?? '';
if ($action === 'druzyna_gatunki') {
    $controller->druzyna_gatunki();
    exit;
} elseif ($action === 'druzyna') {
    echo $controller->druzynaAction();
    exit;
}
// 其他请求逻辑...

2. 在Twig模板中传递Ajax请求URL #

在druzynaAction方法渲染模板时，把指向入口文件的Ajax请求URL作为变量传给Twig：

// ObserverController.php 中的 druzynaAction 方法
public function druzynaAction() {
    // 初始化Twig环境（假设已有相关代码）
    $loader = new \Twig\Loader\FilesystemLoader('path/to/templates');
    $twig = new \Twig\Environment($loader);
    
    // 生成Ajax请求URL，可按需拼接额外参数（如ID）
    $ajaxUrl = 'index.php?action=druzyna_gatunki';
    // 示例：带参数的URL
    // $ajaxUrl = "index.php?action=druzyna_gatunki&id={$this->currentId}";
    
    return $twig->render('druzyna.htm.twig', [
        'ajax_gatunki_url' => $ajaxUrl
    ]);
}

3. 绑定Bootstrap Tab切换事件并发起Ajax #

在druzyna.htm.twig中，用jQuery监听Tab切换完成事件，触发Ajax加载数据：

<!-- 示例Tab结构 -->
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a href="#default-tab" aria-controls="default-tab" role="tab" data-toggle="tab">默认标签</a>
    </li>
    <li role="presentation">
        <a href="#gatunki-tab" aria-controls="gatunki-tab" role="tab" data-toggle="tab">物种数据</a>
    </li>
</ul>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="default-tab">默认内容</div>
    <div role="tabpanel" class="tab-pane" id="gatunki-tab">
        <div id="gatunki-container"></div>
    </div>
</div>

<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>
<script>
$(function() {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        var targetTab = $(e.target).attr('href');
        if (targetTab === '#gatunki-tab') {
            var $container = $('#gatunki-container');
            // 避免重复加载
            if (!$container.children().length) {
                $.ajax({
                    url: '{{ ajax_gatunki_url }}',
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        // 把JSON数据转为HTML结构（示例为列表）
                        var html = '<ul class="list-group">';
                        data.forEach(item => {
                            html += `<li class="list-group-item">${item.nazwa}</li>`;
                        });
                        html += '</ul>';
                        $container.html(html);
                    },
                    error: function() {
                        $container.html('<p class="text-danger">数据加载失败</p>');
                    }
                });
            }
        }
    });
});
</script>

4. 调整druzyna_gatunki方法返回JSON #

确保方法正确设置响应头并输出JSON格式数据：

// ObserverController.php 中的 druzyna_gatunki 方法
public function druzyna_gatunki() {
    // 复用已有数据库连接查询数据
    $stmt = $this->db->query('SELECT * FROM gatunki');
    $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    // 设置JSON响应头
    header('Content-Type: application/json');
    echo json_encode($data);
}

内容的提问来源于stack exchange，提问作者psubrat