ajax实例之图灵智能机器人简易操作

最新推荐文章于 2022-06-11 15:54:00 发布

小斯不斯

最新推荐文章于 2022-06-11 15:54:00 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签：图灵机器人 ajax实例

本文链接：https://blog.youkuaiyun.com/qq_42181069/article/details/80272189

本文介绍了一个基于图灵机器人API的简单聊天应用实现过程。包括了从创建页面按钮到利用JavaScript实现异步请求的具体步骤，展示了如何通过图灵机器人接口进行对话交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、图灵机器人接口：http://www.tuling123.com/

2、思路

思路(伪代码):

创建异步对象  

设置请求行  

设置请求头  

onload回调函数  

设置请求主体

3、创建代码环境

3.1、先创建好页面按钮
<body>
    <input class="message" type="text" placeholder="请输入你要跟机器人聊天的内容">
    <br>
    <input class="send" type="button" value="聊天">
</body>

</html>

<script>
3.2、给按钮注册点击事件
    document.querySelector('.send').onclick = function () {
        3.3、创建自己的p标签，将自己发送的内容添加到页面上
        var myp=document.createElement('p');
        myp.innerHTML=document.querySelector('.message').value;
        myp.style.backgroundColor='skyblue';
        myp.style.color='green';
        document.body.appendChild(myp);

        3.4、创建异步对象
        var ajax = new XMLHttpRequest();
        3.5、响应行，使用的是post的方法，后面调用的是图灵机器人的接口，可以在图灵机器人的网页找到该api接口
        ajax.open('post', 'http://openapi.tuling123.com/openapi/api');
        3.6、响应头
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        3.7、回调函数
        ajax.onload = function () {
        3.8、获取数据，用的是JSON数据格式
            var data = JSON.parse(ajax.responseText);
            console.log(data);
        3.9、创建机器人的语言，并生成在页面上
            var robotP = document.createElement('p');
            robotP.innerHTML = data.text;
            robotP.style.backgroundColor = 'hotpink';
            robotP.style.color = 'yellow';
            document.body.appendChild(robotP);

        3.10、判断是否有list（举例，问一道菜谱，内容过多未完全显示内容的，可以在后台找到list然后获取添加到页面上），非必须生成
            for(var i=0;i<data.list.length;i++){
                var a=document.createElement('a');
                a.innerHTML='<img src=" '+data.list[i].icon+' " alt="">';
                a.href=data.list[i].detailurl;
                robotP.appendChild(a);
            }
        }
        3.11、响应主体拼接密钥，图灵机器人注册后每个机器人都会有一个密钥，需要将key和info一起传送
        ajax.send('key=f30e3b04537946dbade6ff935a73c6c1&info=' + document.querySelector('.message').value);

    }
</script>