如何使用PHP从API获取JSON响应,使用Javascript将JSON数据格式化为HTML?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (125)

我正在使用PHP从API获取JSON响应。JSON响应包含Web上页面的标题和URL。示例JSON响应位于页面底部。

如何使用PHP将此JSON数据中的每个项目写入body标签中的HTML页面?我想创建HTML“a”标签,其中文本是JSON名称值,href是每个项目的JSON url值。

在我使用PHP从API获取JSON数据之后,JSON数据在哪里结束,然后我如何访问它并使用PHP格式化它?我正在使用PHP来保持我的API访问密钥服务器端,以便客户端无法看到它。这是我的代码:

<?php
$accessKey = "12345678";
$endpoint = '*Imaginary API endpoint*';
$term = 'hi';

function APIResponse ($url, $key, $query) {
    $headers = "Ocp-Apim-Subscription-Key: $key\r\n";
    $options = array ('http' => array (
                          'header' => $headers,
                           'method' => 'GET'));
    $context = stream_context_create($options);
    $result = file_get_contents($url . "?q=" . urlencode($query), false, $context);
    $headers = array();
    foreach ($http_response_header as $k => $v) {
        $h = explode(":", $v, 2);
        if (isset($h[1]))
            if (preg_match("/^APIs-/", $h[0]) || preg_match("/^X-MSEdge-/", $h[0]))
                $headers[trim($h[0])] = trim($h[1]);
    }
    return array($headers, $result);
}

if (strlen($accessKey) == 8) {
    print "Searching the Web for: " . $term . "\n";
    list($headers, $json) = APIResponse($endpoint, $accessKey, $term);
    print "\nRelevant Headers:\n\n";
    foreach ($headers as $k => $v) {
        print $k . ": " . $v . "\n";
    }
    print "\nJSON Response:\n\n";
    echo json_encode(json_decode($json), JSON_PRETTY_PRINT);

} else {
    print("Invalid API subscription key!\n");
    print("Please paste yours into the source code.\n");
}
?>

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<!-- This is the result I'm looking for -->
<a href="<?php echo JSON:webPages:value:name ?>"> <?php echo JSON:webPages:value:id ?></a>

</body>
</html>
JSON Response:

{
    "_type": "SearchResponse",
    "queryContext": {
        "originalQuery": "hi"
    },
    "webPages": {
        "webSearchUrl": "https:\/\/imaginaryapi.com\/search?q=hi",
        "totalEstimatedMatches": 65700000,
        "value": [
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.0",
                "name": "Hi | Define Hi at Dictionary.com",
                "url": "https:\/\/www.dictionary.com\/browse\/hi",
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/www.dictionary.com\/browse\/hi",
                "snippet": "After you insisted, you write that, \u201cno one from the crew would meet my eyes or say hi.\u201d",
                "dateLastCrawled": "2018-10-09T15:57:00.0000000Z",
                "language": "en",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.1",
                "name": "Fors\u00ed\u00f0a | H\u00e1sk\u00f3li \u00cdslands",
                "url": "https:\/\/www.hi.is\/",
                "about": [
                    {
                        "name": "University of Iceland"
                    }
                ],
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/www.hi.is",
                "snippet": "Opi\u00f0 fyrir ums\u00f3knir um innritun \u00ed H\u00e1sk\u00f3la \u00cdslands \u00e1 vormisseri 2019 - Takmarka\u00f0ur hluti n\u00e1mslei\u00f0a \u00ed bo\u00f0i. Ums\u00f3knarfrestur \u00ed framhaldsn\u00e1m til 15. okt\u00f3ber og grunnn\u00e1m til 30. n\u00f3vember",
                "deepLinks": [
                    {
                        "name": "Vefp\u00f3stur",
                        "url": "https:\/\/www.hi.is\/haskolinn\/vefpostur"
                    },
                    {
                        "name": "Leit A\u00f0 Starfsf\u00f3lki",
                        "url": "https:\/\/www.hi.is\/starfsmannaleit"
                    },
                    {
                        "name": "S\u00e6kja Um N\u00e1m",
                        "url": "https:\/\/ugla.hi.is\/umsoknir\/index.php"
                    },
                    {
                        "name": "Endurmenntun H\u00ed",
                        "url": "https:\/\/www.hi.is\/nam\/endurmenntun_hi"
                    },
                    {
                        "name": "Stundat\u00f6flur",
                        "url": "https:\/\/www.hi.is\/laeknadeild\/stundatoflur"
                    },
                    {
                        "name": "Fr\u00e9ttir",
                        "url": "https:\/\/www.hi.is\/frettir"
                    }
                ],
                "dateLastCrawled": "2018-10-10T18:35:00.0000000Z",
                "language": "is",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.2",
                "name": "Hi | Definition of Hi by Merriam-Webster",
                "url": "https:\/\/www.merriam-webster.com\/dictionary\/hi",
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/www.merriam-webster.com\/dictionary\/hi",
                "snippet": "These example sentences are selected automatically from various online news sources to reflect current usage of the word 'hi.' Views expressed in the examples do not represent the opinion of Merriam-Webster or its editors.",
                "dateLastCrawled": "2018-10-10T10:35:00.0000000Z",
                "language": "en",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.3",
                "name": "HI - Wikipedia",
                "url": "https:\/\/en.wikipedia.org\/wiki\/HI",
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/en.wikipedia.org\/wiki\/HI",
                "snippet": "Hi (or Hello) is a frequent act of greeting or welcoming someone.HI or Hi may also refer to:",
                "dateLastCrawled": "2018-10-10T15:53:00.0000000Z",
                "language": "en",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.4",
                "name": "Hi (@hi) | Twitter",
                "url": "https:\/\/twitter.com\/hi",
                "thumbnailUrl": "https:\/\/www.bing.com\/th?id=OIP.PqKuxRwx55VE6E--5HFwKQAAAA&pid=Api",
                "about": [
                    {
                        "name": "Hi"
                    },
                    {
                        "name": "Hi"
                    }
                ],
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/twitter.com\/hi",
                "snippet": "The latest Tweets from Hi (@hi). BYEBYE Hi en daarmee ook dit account. We zijn nog wel in de lucht, maar niet actief. Voor servicevragen kun je terecht bij @KPNwebcare. Doei!. Den Haag, Zuid-Holland",
                "dateLastCrawled": "2018-10-05T00:19:00.0000000Z",
                "language": "en",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.5",
                "name": "H\u00ef Ibiza - Brand-New Club in Ibiza, Spain",
                "url": "https:\/\/www.hiibiza.com\/en",
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/www.hiibiza.com\/en",
                "snippet": "H\u00ef Ibiza is the brand new club by Ushua\u00efa Entertainment located in the heart of Ibiza clubland, Playa d'en Bossa. The club will stay true to the open-minded spirit of Ibiza, bringing together music lovers to dance, discover and experience the magic of the White Isle.",
                "dateLastCrawled": "2018-10-09T13:58:00.0000000Z",
                "language": "en",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.6",
                "name": "Danielle Bregoli is BHAD BHABIE \u201cHi Bich \/ Whachu Know ...",
                "url": "https:\/\/www.youtube.com\/watch?v=1NyMSWqIJDQ",
                "about": [
                    {
                        "name": "YouTube"
                    }
                ],
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/www.youtube.com\/watch?v=1NyMSWqIJDQ",
                "snippet": "\ud83d\udea8STREAM \"Hi Bich\" \ufe0f https:\/\/Atlantic.lnk.to\/hibich \ud83d\udda4\ud83d\udc80\ud83c\udfa4\ud83d\udd25 new songs - \u24f5 video HI BICH & WHACHU KNOW by BHAD BHABIE aka Danielle Bregoli\ud83d\udda4\ud83d\udc45\ud83d\udc34\ud83c\udfc1 produced by Ronn...",
                "dateLastCrawled": "2018-10-08T04:50:00.0000000Z",
                "language": "en",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.7",
                "name": "Hi - Capture. Write. Publish",
                "url": "http:\/\/hitotoki.org\/",
                "isFamilyFriendly": true,
                "displayUrl": "hitotoki.org",
                "snippet": "pancakes, Hi Meta, writing Full stack writing (and publishing): Welcome to Hi by Craig Mod. Tokyo \u2014 We\u2019d like to welcome you to Hi: A community of writers, journalists, journalers, illustrators, photographers, travelers, poets, and musicians exploring the world, and sharing those explorations throug...",
                "dateLastCrawled": "2018-10-10T20:13:00.0000000Z",
                "language": "en",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.8",
                "name": "Hi - definition of hi by The Free Dictionary",
                "url": "https:\/\/www.thefreedictionary.com\/hi",
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/www.thefreedictionary.com\/hi",
                "snippet": "2. HI - a state in the United States in the central Pacific on the Hawaiian Islands",
                "dateLastCrawled": "2018-10-09T09:35:00.0000000Z",
                "language": "en",
                "isNavigational": false
            },
            {
                "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.9",
                "name": "Hi, Hi, Hi - Wikipedia",
                "url": "https:\/\/en.wikipedia.org\/wiki\/Hi,_Hi,_Hi",
                "about": [
                    {
                        "name": "Hi, Hi, Hi"
                    },
                    {
                        "name": "Hi, Hi, Hi"
                    },
                    {
                        "name": "Hi, Hi, Hi"
                    }
                ],
                "isFamilyFriendly": true,
                "displayUrl": "https:\/\/en.wikipedia.org\/wiki\/Hi,_Hi,_Hi",
                "snippet": "\"Hi, Hi, Hi\" is a song written by Paul and Linda McCartney and performed by Wings. It was released as a double A-side single with \"C Moon\" in 1972.The song was recorded around the same time as \"C Moon\", in November 1972.",
                "snippetAttribution": {
                    "license": {
                        "name": "CC-BY-SA",
                        "url": "http:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/"
                    },
                    "licenseNotice": "Text under CC-BY-SA license"
                },
                "dateLastCrawled": "2018-10-10T20:41:00.0000000Z",
                "language": "en",
                "isNavigational": false
            }
        ],
        "someResultsRemoved": true
    },

    "rankingResponse": {
        "mainline": {
            "items": [
                {
                    "answerType": "WebPages",
                    "resultIndex": 0,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.0"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 1,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.1"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 2,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.2"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 3,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.3"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 4,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.4"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 5,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.5"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 6,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.6"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 7,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.7"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 8,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.8"
                    }
                },
                {
                    "answerType": "WebPages",
                    "resultIndex": 9,
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#WebPages.9"
                    }
                },
                {
                    "answerType": "RelatedSearches",
                    "value": {
                        "id": "https:\/\/imaginaryapi.com\/api\/v7\/#RelatedSearches"
                    }
                }
            ]
        }
    }
}
提问于
用户回答回答于

要打印数据,可以使用:

$result = json_decode ( $json, true);
foreach ( $result["webPages"]["value"] as $data)
{
  echo "<a href=\"" . urlencode ( $data["id"]) . "\">" . $data["name"] . "</a>\n";
}
用户回答回答于

在javascript部分尝试这个

document.body.onload = addLink;

function addLink () {

  // FIRST method : Embedding php in javascripts
  <?php foreach(json_encode($json)->webPages->value as $value) { ?>

    // Create a new markup
    var newContent = $('<a href="<?php echo $value->url ?>"><?php echo $value->id ?></a>');

    // And add the text node to your div by it's class / id
    $('.link').appendChild(newContent);

  <?php } ?>

  //////////////
  // ...OR... //
  //////////////

  // SECOND method : Pass php variable (in this case it's JSON object) into javascripts
  var json = <? echo json_encode($json)->webPages->value ?>;
  json.forEach(function(value){

    // Create a new markup
    var newContent = $('<a href="' + value.url + '">' + value.id + '</a>');

    // And add the text node to your div by it's class / id
    $('.link').appendChild(newContent);

  });

}

扫码关注云+社区

领取腾讯云代金券