天行api调用ajax,【API】聊天机器人接口

文章目录

一、无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