文章目录
一、无key直接调用的api
1. 接口地址
漫小猫API聊天接口(免费,还有其它蛮不错的API)
2. 示例
通过ajax发送GET/POST请求,返回JSON数据,拿到数据后输出。
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
ul li {
list-style: none;
}
.wrap {
display: flex;
justify-content: center;
align-items: center;
height: 50%;
}
.container {
padding: 20px;
width: 80%;
height: 80%;
background-color: #eee;
border: 1px solid black;
overflow: auto;
}
.bar-group {
padding: 20px;
text-align: center;
}
.bar-group input:first-of-type {
padding: 5px;
width: 300px;
}
.bar-group input:not(:first-of-type) {
padding: 5px 20px;
}
var container = document.querySelector('.container');
var msg = document.querySelector('.msg');
var umsg = document.querySelector('#umsg');
// 发送数据
function send() {
if (umsg.value) {// 非空
var uli = document.createElement('li');
uli.textContent = '你:' + umsg.value;
msg.appendChild(uli);
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.brhsm.cn/lt.php?msg='+umsg.value+'&t=1', true);
xhr.responseType = 'json';// 服务器返回 json
xhr.onload = function() {
if (xhr.readyState === 4) {
if ( (xhr.status >= 200 && xhr.status < 300)
|| (xhr.status === 304) ) {
var retval = this.response.text;
var hli = document.createElement('li');
hli.textContent = '小贱:' + retval;
msg.appendChild(hli);
container.scrollTop = container.scrollHeight; // 滚动条置底
}
}
};
xhr.send(null);
umsg.value = '';
}
umsg.focus();// 聚焦
container.scrollTop = container.scrollHeight; // 滚动条置底
}
// 清空屏幕
function clearTxt() {
msg.innerHTML = null;
umsg.value = null;
umsg.focus();// 聚焦
}
umsg.focus();// 聚焦
二、需要个人密钥调用的接口
1. 接口地址
天行数据API(需注册申请,拥有很多免费接口)
2. 示例
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
ul li {
list-style: none;
}
.wrap {
display: flex;
justify-content: center;
align-items: center;
height: 50%;
}
.container {
padding: 20px;
width: 80%;
height: 80%;
background-color: #eee;
border: 1px solid black;
overflow: auto;
}
.bar-group {
padding: 20px;
text-align: center;
}
.bar-group input:first-of-type {
padding: 5px;
width: 300px;
}
.bar-group input:not(:first-of-type) {
padding: 5px 20px;
}
var container = document.querySelector('.container');
var msg = document.querySelector('.msg');
var umsg = document.querySelector('#umsg');
// 发送数据
function send() {
if (umsg.value) {// 非空
var uli = document.createElement('li');
uli.textContent = '你:' + umsg.value;
msg.appendChild(uli);
// URL查询参数实例,直接对象格式,省去了很多麻烦
var params = new URLSearchParams({
key: '',// 你的密钥
question: umsg.value,// 输入的内容
});
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://api.tianapi.com/txapi/robot/index', true);
xhr.responseType = 'json';// 服务器返回 json
xhr.onload = function() {
if (xhr.readyState === 4) {
if ( (xhr.status >= 200 && xhr.status < 300)
|| (xhr.status === 304) ) {
var retval = this.response.newslist[0].reply
.replace(/\{appellation\}/g, '大佬')// "你"的名字
.replace(/\{robotname\}/g, '小天');// "机器人"的名字
var hli = document.createElement('li');
hli.textContent = '小天:' + retval;
msg.appendChild(hli);
container.scrollTop = container.scrollHeight; // 滚动条置底
}
}
};
// POST 请求需要的头信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(params);// 直接发送URL查询参数实例
umsg.value = '';
}
umsg.focus();// 聚焦
container.scrollTop = container.scrollHeight; // 滚动条置底
}
// 清空屏幕
function clearTxt() {
msg.innerHTML = null;
umsg.value = null;
umsg.focus();
}
umsg.focus();// 聚焦
这个需要填写自己的key密钥,注册账号查看后台就有了
标签:container,机器人,umsg,接口,padding,xhr,API,var,msg
来源: https://blog.csdn.net/weixin_45389633/article/details/110879373