将 JS 获取调用更改为 PHP 和 AJAX 调用未正确显示

Question

我最初有一个 JavaScript 函数来获取所选国家/地区的维基百科文章。我最初在 JS Fiddle 上找到了代码，它运行良好，但后来我被告知我的课程需要通过 PHP 和 AJAX 进行所有 API 调用。

// ----- Function responsible for grabbing country name & code to populate wikipedia modal -----//
//adapted from JSFiddle
function getWikiSearch(countryName) {
    let ids = "";
    let links = [];
    let results = [];

    fetch("https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&origin=*&srsearch=" + countryName)
        .then(response => {
            return response.json();
        })
        .then(result => {
            results = result.query.search;
            for (var i = 0; i < results.length; i++) {
                if (results[i + 1] != null) {
                    ids += results[i].pageid + "|";
                } else {
                    ids += results[i].pageid;
                }
            }
        })
        .then(a => {
            fetch("https://en.wikipedia.org/w/api.php?action=query&prop=info&inprop=url&origin=*&format=json&pageids=" + ids)
                .then(idresult => {
                    return idresult.json();
                })
                .then(idresult => {
                    for (i in idresult.query.pages) {
                        links.push(idresult.query.pages[i].fullurl);
                    }
                })
                .then(g => {
                    document.getElementById("output").innerHTML = "";
                    for (let i = 0; i < results.length; i++) {
                        if (i < 3) {
                            document.getElementById("output").innerHTML += "<br><br><a href='" + links[i] + "'target='_blank'>" + results[i].title + "</a><br>" + results[i].snippet + "... Click title to read full article.";
                        }
                    }
                });
        });
}

由于上述原因，我试图调整代码：第一个 fetch 语句的 PHP 文件（第二个格式完全相同，只是适当的 URL）

<?php

// Display errors is set to on and should be removed for production
    ini_set('display_errors', 'On');
    error_reporting(E_ALL);

// Timing script execution
    $executionStartTime = microtime(true);

    $url='https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&origin=*&srsearch=' . $_REQUEST['countryName'];
// Curl object is initiated
    $ch = curl_init();
    
//Curl_setopt() takes three parameters(Curl instance to use, setting you want to change, value you want to use for that setting)    

    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); 

?>

然后像这样的 AJAX 调用：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
                },
        contentType: 'application/json',
        success: function(result) {
            console.log(result)
        
            results = result.query.search;
            for (var i = 0; i < results.length; i++) {
                if (results[i + 1] != null) {
                    ids += results[i].pageid + "|";
                } else {
                    ids += results[i].pageid;
                }
            }
            console.log(ids)
                $.ajax({
                method: 'GET',
                url: "assets/php/getWikiID.php",
                data: {
                       id: ids
                        },
                contentType: 'application/json',
                success: function(result) {
                    console.log(result)
                    for (i in idresult.query.pages) {
                    links.push(idresult.query.pages[i].fullurl);
                    
                    document.getElementById("wikiSearch").innerHTML = "";
                            for (let i = 0; i < results.length; i++) {
                                if (i < 3) {
                                    document.getElementById("wikiSearch").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.log(jqXHR)
                            console.log(textStatus)
                            console.log(errorThrown)
                                }
                    })
        }
        

和HTML

      <!-- Wikipedia Modal -->
      <div class="modal fade" id="wikiModal">
         <div class="modal-dialog">
            <div class="modal-content">
               <!-- Modal Header -->
               <div class="modal-header">
                  <h4 class="modal-title">Wikipedia Information</h4>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>
               <!-- Modal body -->
               <div class="modal-body">
                  <input id="input" type="text" placeholder="Search Wikipedia">
                  <button id="wikiBtn" onclick="wikiSearch(document.querySelector('#input').value)">
                  Search
                  </button>
                  <hr>
                  <div id="output"></div>
               </div>
            </div>
         </div>
      </div>

当控制台在控制台中显示适当的 JSON 结果时，模态中没有出现任何内容？

使用原始 fetch 语句代码（说明的第一个代码），我的 Modal 看起来像这样

我不确定如何修复代码，使其按预期显示

Answer 1

你有这些行：

for (i in idresult.query.pages) {
links.push(idresult.query.pages[i].fullurl);

但是idresult 不存在。我认为这是一个错字，应该是

for (i in result.query.pages) {
links.push(result.query.pages[i].fullurl);