使用JQuery.ajax实现莉莉机器人API的调用

莉莉机器人官网:http://www.itpk.cn/

先看功能:

我们看到,莉莉机器人提供了两种返回方式:文本和json

再看接入参数:http://i.itpk.cn/api.php?question=你要发送的文本

--------------------------------------------------------------------------------------------------------------------------------

现在我们开始上代码:

第一步:引入JQ

<script src="js/jquery-3.3.1.js"></script>

既然是和机器人聊天,那就写一个漂亮的界面吧!(斜眼笑)

 

漂亮吧!

HTML:

    <div class="cont">
       <div class="msg">
           <p class="ai">【对方】:</p>
           <p class="you">【你】:</p>
       </div>
       <div class="btm">
           <input class="txt" type="text">
            <button οnclick="sub()">发送</button>
       </div>
    </div>

CSS:

    .cont{width: 500px;height: 500px;margin: auto;}
    .msg{width: 500px;height: 400px;background-color: #2AA5D0;padding: 10px;overflow-y:scroll;}
    p{
        width: 100%;
        word-break:break-word;
        background-color: aquamarine;
        border-radius: 5px;
    }}

创建jquery.ajax请求:

    function sub(){
            var ttpk=$.ajax({
                url:"http://i.itpk.cn/api.php?question=香港天气",
                dataType:"text",
                success:function(data){
                    //成功
                },
                error:function(e){
                    //失败
                }
        })
    }

 

现在alert一下请求到的数据吧:

-------------------

 

成功拿到数据!

现在给他添加到消息框中!

        var ttpk=$.ajax({
            url:"http://i.itpk.cn/api.php?question="+val,
            dataType:"text",
            success:function(data){
                //成功
                /*向msg添加DOM节点*/
                $(".msg").append("<p class='you'>【你】:"+val+"</p>");
                //添加对方返回的值
                $(".msg").append("<p class='ai'>【对方】:"+data+"</p>");
                console.log("完成!")
            },
            error:function(e){
                //失败
                alert("请求失败!");
            }
        })

看看效果:

ta说ta暗恋我(滑稽)

----------------------------文本请求完毕!---------------------------

下面开始json方式拿数据:

先看官方文档:

文档说明了,发送【笑话】会返回一个:[ title ]和一个[ content ]的数据

上代码:

var ttpk=$.ajax({
            url:"http://i.itpk.cn/api.php?question=笑话",
            dataType:"json",
            success:function(data){
                //成功
                console.log("笑话标题:《"+data.title+"》");
                console.log("笑话内容:"+data.content+"");
            },
            error:function(e){
                //失败
                alert("请求失败!");
            }
        })

完美,最后拼接一下然后插入到文档里面就好啦!

最后:API由:IPTK提供

posted @ 2020-01-07 11:31  阿沅lmo  阅读(78)  评论(0编辑  收藏  举报