Ajax之調用一言網站API接口

時間 2019-12-16

標籤 ajax 調用一言網站 api 接口欄目 Ajax 简体版

原文原文鏈接

Ajax的做用，主要是實現局部刷新。html

經過老大哥告知，Ajax接口可使用一言網站的，因此本身就練了一會兒。jquery

本文全部用到的接口都來自一言網站：https://hitokoto.cn/apiapi

經過網站公告可知，一言網站的JSON數據格式以下：網絡

id	本條一言的id。能夠連接到https://hitokoto.cn?id=[id]查看這個一言的完整信息。
hitokoto	一言正文。編碼方式unicode。使用utf-8。
type	類型。請參考第三節參數的表格。
from	一言的出處。
creator	添加者。
created_at	添加時間。
注意：若是encode參數爲text，那麼輸出的只有一言正文。

接口類型以下：函數

https://v1.hitokoto.cn/（從7種分類中隨機抽取）

https://v1.hitokoto.cn/?c=b （請求得到一個分類是漫畫的句子）

https://v1.hitokoto.cn/?c=f&encode=text （請求得到一個來自網絡的句子，並以純文本格式輸出）網站

既然咱們知道了接口，那麼就讓咱們來分析一下如何利用Ajax使用這個接口。ui

首先先要肯定html頁面須要如何顯示數據，使用列表、表格、仍是lable標籤呢？編碼

這裏咱們採用了簡單的table(表格)標籤，注意，在使用表格的時候tr表示表格中的行，td表示表格中的單元格，tr須要和td嵌套使用即：<tr><td></td></tr>spa

既然咱們肯定了HTML頁面使用表格標籤來顯示數據，那麼接下來咱們編寫JS代碼。code

編寫JS代碼，須要建立一個入口，而後在入口中編寫Ajax的請求函數，

最後，經過獲取標籤元素來給HTML頁面進行傳值。

代碼實現：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax使用一言接口</title>
    <script src="../JS/jquery-1.12.4.min.js"></script>
    <script>
        function get_Ajax(){
            $.get('https://v1.hitokoto.cn/',{},function(response){
                $('#td1').html(response.id);
                $('#td2').html(response.hitokoto);
                $('#td3').html(response.type);
                $('#td4').html(response.from);
                $('#td5').html(response.creator);
                $('#td6').html(response.created_at);
            },'JSON');
        }
        function Ajax_start(){
            setInterval(get_Ajax,5000);   
        }

    </script>
    <style>
    table,tr,td{
        border: 4px solid yellowgreen;
        border-collapse: collapse;
    }

    </style>
</head>
<body>
    <table>
        <tr><td>ID:</td><td id="td1">無</td></tr>
        <tr><td>正文：</td><td id="td2">無</td></tr>
        <tr><td>類型：</td><td id="td3">無</td></tr>
        <tr><td>出處：</td><td id="td4">無</td></tr>
        <tr><td>添加者：</td><td id="td5">無</td></tr>
        <tr><td>添加時間：</td><td id="td6">無</td></tr>
    </table>
    <input type="button" value="開始Ajax請求" onclick="Ajax_start()">
</body>
</html>