Ajax的作用，主要是实现局部刷新。

通过老大哥告知，Ajax接口可以使用一言网站的，所以自己就练了一下子。

本文所有用到的接口都来自一言网站：https://hitokoto.cn/api

通过网站公告可知，一言网站的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使用这个接口。

首先先要确定html页面需要如何显示数据，使用列表、表格、还是lable标签呢？

这里我们采用了简单的table(表格)标签，注意，在使用表格的时候tr表示表格中的行，td表示表格中的单元格，tr需要和td嵌套使用即：<tr><td></td></tr>

既然我们确定了HTML页面使用表格标签来显示数据，那么接下来我们编写JS代码。

编写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>

Ajax之调用一言网站API接口的更多相关文章

  1. Django使用AJAX调用自己写的API接口

    Django使用AJAX调用自己写的API接口 *** 具体代码和数据已上传到github https://github.com/PythonerKK/eleme-api-by-django-rest ...

  2. 如何调用EcStore中的API接口

    EcStore系统已内置了丰富的API接口供外部系统调用(接口列表见文章最下面),外部系统具体如何调用这些API呢? 例如有一个PHP的论坛需要调用ecstore系统内一个商品的详情,则可以使用b2c ...

  3. 使用HttpWebRequest请求API接口以及其他网站资源

    很多时候,我们项目需要其他网站的资源,而这个被请求的网站可能属于你们自己开发管理的网站.也可能是公网上其他网站对外开发的API接口,比如说腾讯的微信公众平台的API接口.各大短信服务商的短信API接口 ...

  4. api接口写好了?想过(Accept,Content-Type)?返回类型json|xml?

    api接口写好了?想过(Accept,Content-Type)?返回类型json|xml? 起因: - A,B. A调用B提供的api接口. - A:为毛你的接口返回的是xml格式的(浏览器访问)? ...

  5. asp.net 模拟CURL调用微信公共平台API 上传下载多媒体文

    近公司项目上在开发微信服务号的接口,需要给用户回复图片或语音或视频,这个时候就需要用到 上传下载多媒体文件接口,微信在这方面推荐采用的是开源函数库curl实现的,CURL项目包括很多版本,我主要测试的 ...

  6. 初识Django —Python API接口编程入门

    初识Django —Python API接口编程入门 一.WEB架构的简单介绍 Django是什么? Django是一个开放源代码的Web应用框架,由Python写成.我们的目标是用Python语言, ...

  7. 新浪短网址最新api接口

    1,雨林短网址 网站链接:http://yldwz.cn 雨林短网址采用新浪.腾讯官方API接口,强大的多功能API,简单易用,质量高官 网提供强技术支持,99.9% SLA服务稳定安全可靠的校验机制 ...

  8. 开放API接口安全处理！

    目录 概念 加密 MD5 Token 开放api参数 重复提交,恶意调用 日志 验证码 开放API接口安全处理! 参考文献: 公钥,私钥和数字签名这样最好理解 (转载) 概念 存在问题: 数据窃取 数 ...

  9. ajax跨域实现api 接口调用

    背景: 想实现跨域去调用接口, 然后同时支持下次调用,能够带cookie信息过来,同时支持来自多个源头的域名的跨域调用. 1.这样支持来自所有域名的跨域调用: 不支持跨域是,浏览器报错: 在api接口 ...

随机推荐

  1. 新闻实时分析系统-Hadoop2.X分布式集群部署

    (一)hadoop2.x版本下载及安装 Hadoop 版本选择目前主要基于三个厂商(国外)如下所示: 1.基于Apache厂商的最原始的hadoop版本, 所有发行版均基于这个版本进行改进. 2.基于 ...

  2. Kotlin实战案例：带你实现RecyclerView分页查询功能（仿照主流电商APP，可切换列表和网格效果）

    随着Kotlin的推广,一些国内公司的安卓项目开发,已经从Java完全切成Kotlin了.虽然Kotlin在各类编程语言中的排名比较靠后(据TIOBE发布了 19 年 8 月份的编程语言排行榜,Kot ...

  3. Java基础常见笔试题总结

    1.什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节码文件 2.“sta ...

  4. python基础-网络编程part02

    TCP协议 TCP是传输控制协议,建立双向通道. 三次握手,建立连接 客户端向服务端发送建立连接的请求 服务端接收请求返回确认信息给客户端,并向客户端发送建立连接的请求 客户端接收请求返回确认信息给服 ...

  5. 【Android - 问题解决】之ScrollView嵌套ListView时总是自动滑动到ListView顶部的问题

    最近做了一个项目,里面有一个ScrollView嵌套ListView的布局. 做出来之后发现,进入这个界面之后,总是自动滑动到ListView的顶部,而ScrollView中位于ListView上面的 ...

  6. 【开发工具 - MySQL】之不能插入中文的问题

    新安装的MySQL数据库,在安装的时候设置了字体为UTF8,但在使用insert语句插入中文的时候还是会报错. 具体解决方法:在MySQL控制台中输入以下设置代码: SET character_set ...

  7. 【RN - 基础】之TextInput使用简介

    TextInput组件允许用户在应用中通过键盘输入文本信息,其使用方法和Text.Image一样简单,实例代码如下: <TextInput placeholder={'请输入用户名'} styl ...

  8. Vue项目解析

    各个文件夹 node_modules:用来放环境依赖 public:用来放公共资源,里面的index.html文件,就是初始的挂载点.被app.vue给取代了. src:放各种资源的. assets: ...

  9. c语言I博客专业06

    问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-2/homework/8655 我在 ...

  10. make命令和makefile

    make命令和Makefiles: 1. make是一个命令,解释makefile中指令的命令工具,不同的IDE有自己的make命令. 1. make命令不知道怎么去构建程序,必须有一个文件告诉mak ...