使用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提供