如何以HTML模式顯示AJAXWikipediaAPI呼叫

我有 2 個這樣的 PHP 腳本，它們使用國家名稱通過 API 顯示相關的維基百科文章

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

?>

<?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&prop=info&inprop=url&origin=*&format=json&pageids=' . $_REQUEST['id'];
// 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); 

?>

然后我嘗試了一個 JS 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 result.query.pages) {
                links.push(result.query.pages[i].fullurl);                  
                    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.";

                            }}
                }}})
                },
                error: function(jqXHR, textStatus, errorThrown) {
                            console.log(jqXHR)
                            console.log(textStatus)
                            console.log(errorThrown)
                                }
                    })
        }

我的控制臺顯示 api 呼叫正在回傳適當的資料，但我似乎無法像這個例子一樣讓資料適合我的模式。

相反，我的模式只是空白的，有一個搜索欄和按鈕，它們什么都不做

uj5u.com熱心網友回復：

您在 ajax 請求中設定 contentType 而不是 dataType（請參閱contentType vs dataType。您收到的是 json 而不是發送它。
更改

contentType: 'application/json',

至

dataType: 'json',

此外，您正在嘗試訪問錯誤回傳的 json 資料，您在result嘗試訪問資料時遺漏了 a 。

var results = result.result.query.search;
...

    for (let i in result.result.query.pages) {

標籤：javascriptphphtml阿贾克斯

上一篇：使用Docker運行本地Chainlink節點-錯誤：無效的組合專案

下一篇：在專案根目錄中使用.env的REACTJS中的環境變數有多安全？