【API】聊天机器人接口
作者：互联网
文章目录
一、无key直接调用的api
1. 接口地址
漫小猫API聊天接口（免费，还有其它蛮不错的API）
2. 示例
通过ajax发送GET/POST请求，返回JSON数据，拿到数据后输出。
<!DOCTYPE html>
<html lang="zh">
<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></title>
<style>
* {
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;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<ul class="msg"></ul>
</div>
</div>
<hr />
<form onsubmit="return false">
<p class="bar-group">
<input type="text" id="umsg" placeholder="说点什么..."/>
<input type="submit" value="发送" onclick="send()" />
<input type="reset" value="重输" onclick="umsg.focus();" />
<input type="button" value="清屏" onclick="clearTxt()" />
</p>
</form>
<script>
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(); // 聚焦
</script>
</body>
</html>
二、需要个人密钥调用的接口
1. 接口地址
天行数据API（需注册申请，拥有很多免费接口）
2. 示例
<!DOCTYPE html>
<html lang="zh">
<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></title>
<style>
* {
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;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<ul class="msg"></ul>
</div>
</div>
<hr />
<form onsubmit="return false">
<p class="bar-group">
<input type="text" id="umsg" placeholder="说点什么..."/>
<input type="submit" value="发送" onclick="send()" />
<input type="reset" value="重输" onclick="umsg.focus();" />
<input type="button" value="清屏" onclick="clearTxt()" />
</p>
</form>
<script>
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(); // 聚焦
</script>
</body>
</html>
- 这个需要填写自己的key密钥，注册账号查看后台就有了
标签：container,机器人,umsg,接口,padding,xhr,API,var,msg 来源： https://blog.csdn.net/weixin_45389633/article/details/110879373