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

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

先看功能：

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

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

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

现在我们开始上代码：

第一步：引入JQ

既然是和机器人聊天，那就写一个漂亮的界面吧！（斜眼笑）

 

漂亮吧！

HTML：

    

       

           
【对方】：
           
【你】：
       
       

           
            发送
       
    

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("
【你】："+val+"
");
                //添加对方返回的值
                $(".msg").append("
【对方】："+data+"
");
                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提供