将JS Fetch请求改为PHP+AJAX后，维基百科模态框无内容显示

问题背景 #

原本使用JavaScript Fetch函数可正常获取并显示所选国家的维基百科文章，改为PHP接口+AJAX调用后，控制台能输出正确JSON数据，但维基百科模态框始终无内容显示。

核心错误点 #

1. 响应结构层级错误：PHP接口将维基百科的原始响应包裹在了result字段中，但AJAX代码直接读取result.query.search，忽略了外层的result层级
2. 变量名不匹配：第二个AJAX的回调参数是result，但代码中错误使用了未定义的idresult变量
3. DOM元素ID不匹配：HTML中内容容器ID为output，但AJAX代码错误指向了不存在的wikiSearch
4. 内容生成逻辑顺序错误：遍历页面链接时重复清空容器并生成内容，导致最终仅显示最后一条数据
5. 多余请求头设置：GET请求无需设置contentType: 'application/json'，可能导致解析异常

修复后的代码 #

1. 修正后的AJAX调用代码

function getWikiSearch() {
    let countryName = $('#innerSelect option:selected').text();
    if (countryName === 'United Kingdom') {
        countryName = 'UK';
    }

    let ids = "";
    let links = [];
    let results = [];

    $.ajax({
        method: 'GET',
        url: "assets/php/getWiki.php",
        data: { countryName: countryName },
        success: function(response) {
            // 读取PHP返回的嵌套层级里的维基数据
            results = response.result.query.search;
            
            // 拼接pageid字符串，简化逻辑
            for (var i = 0; i < results.length; i++) {
                ids += results[i].pageid;
                if (i !== results.length - 1) {
                    ids += "|";
                }
            }

            $.ajax({
                method: 'GET',
                url: "assets/php/getWikiID.php",
                data: { id: ids },
                success: function(idResponse) {
                    links = [];
                    // 读取嵌套层级的页面数据
                    const pages = idResponse.result.query.pages;
                    
                    // 收集所有页面链接
                    for (const pageId in pages) {
                        links.push(pages[pageId].fullurl);
                    }

                    // 生成模态框内容
                    const outputEl = document.getElementById("output");
                    outputEl.innerHTML = "";
                    
                    // 仅显示前3条结果
                    for (let i = 0; i < results.length && i < 3; i++) {
                        outputEl.innerHTML += `
                            <br><br>
                            <a href="${links[i]}" target="_blank">${results[i].title}</a>
                            <br>${results[i].snippet}... Click title to read full article.
                        `;
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error("ID请求错误:", jqXHR, textStatus, errorThrown);
                }
            });
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.error("搜索请求错误:", jqXHR, textStatus, errorThrown);
        }
    });
}

2. 补充第二个PHP接口（getWikiID.php）

确保和第一个接口结构一致，统一包裹响应：

<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL);

$executionStartTime = microtime(true);

$url = 'https://en.wikipedia.org/w/api.php?action=query&prop=info&inprop=url&origin=*&format=json&pageids=' . $_REQUEST['id'];

$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url);

$result = curl_exec($ch);
curl_close($ch);

$decode = json_decode($result, true);

$output['status']['code'] = "200";
$output['status']['name'] = "ok";
$output['status']['description'] = "success";
$output['status']['returnedIn'] = intval((microtime(true) - $executionStartTime) * 1000) . " ms";
$output['result'] = $decode;

header('Content-Type: application/json; charset=UTF-8');
echo json_encode($output);
?>

3. 确认HTML容器ID（修正按钮触发事件）

确保模态框中的内容容器和按钮触发逻辑正确：

<div class="modal-body">
    <input id="input" type="text" placeholder="Search Wikipedia">
    <button id="wikiBtn" onclick="getWikiSearch()">Search</button>
    <hr>
    <div id="output"></div>
</div>

额外优化点 #

• 使用模板字符串拼接HTML内容，比传统字符串拼接更易读维护
• 简化pageid拼接逻辑，避免冗余的边界判断
• 清空链接数组避免重复数据积累
• 添加针对性的错误日志标注，方便调试定位

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