Ajax之调用一言网站API接口
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接口的更多相关文章
- Django使用AJAX调用自己写的API接口
Django使用AJAX调用自己写的API接口 *** 具体代码和数据已上传到github https://github.com/PythonerKK/eleme-api-by-django-rest ...
- 如何调用EcStore中的API接口
EcStore系统已内置了丰富的API接口供外部系统调用(接口列表见文章最下面),外部系统具体如何调用这些API呢? 例如有一个PHP的论坛需要调用ecstore系统内一个商品的详情,则可以使用b2c ...
- 使用HttpWebRequest请求API接口以及其他网站资源
很多时候,我们项目需要其他网站的资源,而这个被请求的网站可能属于你们自己开发管理的网站.也可能是公网上其他网站对外开发的API接口,比如说腾讯的微信公众平台的API接口.各大短信服务商的短信API接口 ...
- api接口写好了?想过(Accept,Content-Type)?返回类型json|xml?
api接口写好了?想过(Accept,Content-Type)?返回类型json|xml? 起因: - A,B. A调用B提供的api接口. - A:为毛你的接口返回的是xml格式的(浏览器访问)? ...
- asp.net 模拟CURL调用微信公共平台API 上传下载多媒体文
近公司项目上在开发微信服务号的接口,需要给用户回复图片或语音或视频,这个时候就需要用到 上传下载多媒体文件接口,微信在这方面推荐采用的是开源函数库curl实现的,CURL项目包括很多版本,我主要测试的 ...
- 初识Django —Python API接口编程入门
初识Django —Python API接口编程入门 一.WEB架构的简单介绍 Django是什么? Django是一个开放源代码的Web应用框架,由Python写成.我们的目标是用Python语言, ...
- 新浪短网址最新api接口
1,雨林短网址 网站链接:http://yldwz.cn 雨林短网址采用新浪.腾讯官方API接口,强大的多功能API,简单易用,质量高官 网提供强技术支持,99.9% SLA服务稳定安全可靠的校验机制 ...
- 开放API接口安全处理!
目录 概念 加密 MD5 Token 开放api参数 重复提交,恶意调用 日志 验证码 开放API接口安全处理! 参考文献: 公钥,私钥和数字签名这样最好理解 (转载) 概念 存在问题: 数据窃取 数 ...
- ajax跨域实现api 接口调用
背景: 想实现跨域去调用接口, 然后同时支持下次调用,能够带cookie信息过来,同时支持来自多个源头的域名的跨域调用. 1.这样支持来自所有域名的跨域调用: 不支持跨域是,浏览器报错: 在api接口 ...
随机推荐
- 小白学 Python 爬虫(6):前置准备(五)爬虫框架的安装
人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...
- 真的,Kafka 入门一篇文章就够了
初识 Kafka 什么是 Kafka Kafka 是由 Linkedin 公司开发的,它是一个分布式的,支持多分区.多副本,基于 Zookeeper 的分布式消息流平台,它同时也是一款开源的基于发布订 ...
- Windows之Java开发环境快速搭建
说明:Node.js非必须,通常中小公司或创业公司,基本上都要求全栈. 补充说明: 除此之外,当公司固定JDK.Maven.Idea.Git.Node.js及其相关IDE等版本时,运维人员或者Team ...
- es6 filter方法应用
let arr =[ {title:'aaaa',read:100,hot:true}, {title:'bbbb',read:50,hot:false}, {title:'ccc',read:100 ...
- 迈进java初中级程序员分水岭是否合格?十个题告诉你!
前言 不论你是职场新人还是步入职场N年的职场新人大哥大~当然这个N<3~,我能担保你答不对这十个题~不要问我为什么这么自信~,这些个题还是"有水平"的javase的基础题,传 ...
- Java中的compareTo()方法,compareToIgnoreCase()方法
1.compareTo(String)方法: Java中String类有一个compareTo方法,该方法返回一个int类型的数据.其比较规则是:拿出字符串的第一个字符与参数的第一个字符进行比较,如果 ...
- SpringIoc以及set注入八种基本类型的简单实现
SpringIoc以及set注入八种基本类型的简单实现 主要涉及到的技术以及API 反射.xml定义和解析.树模型 反射可以在代码运行状态下动态的创建对象以及调用方法. API:Dom4j.Class ...
- 不止面试-JVM垃圾回收面试题详解
第一部分:面试题 本次分享我们将尝试回答以下问题: GC 是什么? 为什么要有 GC? 简单说一下java的垃圾回收机制. JVM的常见垃圾回收算法有哪些? 为什么要使用分代回收机制? 如何判断一个对 ...
- Blazor 版 Bootstrap Admin 通用后台权限管理框架
前言 上一篇介绍过了前后台分离的 NET Core 通用权限管理系统 在这篇文章简要的介绍了 Bootstrap Admin 后台管理框架的一些功能.本篇文章带来的是微软最新出的 Blazor 版本的 ...
- 如何运用DDD - 领域服务
目录 如何运用DDD - 领域服务 概述 什么是领域服务 从实际场景下手 更贴近现实 领域服务VS应用服务 扩展上面的需求 最常见的认证授权是领域服务吗 使用领域服务 不要过多的使用领域服务 不要将过 ...