通过AJAX调用PHP函数显示Div的实现方案求助

1. 修改HTML结构 #

• 给目标链接添加标识用于绑定事件，同时通过data-*属性存储combine参数，避免直接跳转；
• 新增一个默认隐藏的容器Div，用于展示AJAX请求返回的内容。

修改后的代码如下：

<!-- 原链接调整：保留样式，添加事件标识和参数存储 -->
<a class="dropdown-item text-muted ajax-load-trigger" href="#" data-combine="<?php echo $C->combine ?>"><?= $L['btnDelete']; ?></a>

<!-- 内容展示容器：默认隐藏，可自定义样式 -->
<div id="ajax-content-box" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 24px; background: #fff; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,0.15); z-index: 1000;">
    <span id="close-box" style="position: absolute; top: 8px; right: 12px; cursor: pointer; font-size: 18px;">×</span>
    <div id="content-wrapper"></div>
</div>

2. 编写JavaScript逻辑 #

用原生JS实现AJAX请求，监听链接点击事件，获取数据后填充到容器并显示：

// 获取元素
const triggerLinks = document.querySelectorAll('.ajax-load-trigger');
const contentBox = document.getElementById('ajax-content-box');
const contentWrapper = document.getElementById('content-wrapper');
const closeBtn = document.getElementById('close-box');

// 绑定点击事件
triggerLinks.forEach(link => {
    link.addEventListener('click', function(e) {
        // 阻止链接默认跳转行为
        e.preventDefault();
        
        // 获取combine参数值
        const combineVal = this.getAttribute('data-combine');
        
        // 发送AJAX请求
        fetch(`index.php?module=events&action=generated&combine=${combineVal}`)
            .then(res => {
                if (!res.ok) throw new Error('请求失败');
                // 若后端返回JSON，替换为res.json()
                return res.text();
            })
            .then(data => {
                // 填充内容并显示容器
                contentWrapper.innerHTML = data;
                contentBox.style.display = 'block';
            })
            .catch(err => {
                contentWrapper.innerHTML = `<p>加载出错：${err.message}</p>`;
                contentBox.style.display = 'block';
            });
    });
});

// 绑定关闭按钮事件
closeBtn.addEventListener('click', () => {
    contentBox.style.display = 'none';
});

3. 后端接口说明 #

确保index.php?module=events&action=generated接口能根据combine参数返回正确内容：

• 如果需要直接展示HTML片段，接口直接输出对应内容即可；
• 如果返回JSON数据，前端需调整then中的处理逻辑，将JSON数据渲染为HTML后再填充到容器。

内容的提问来源于stack exchange，提问作者Metin Akkoç