ajax做与图灵机器人微信对话

最新推荐文章于 2020-10-12 09:40:30 发布

石界星空

最新推荐文章于 2020-10-12 09:40:30 发布

阅读量721

点赞数 1

分类专栏： js ajax 文章标签： ajax

本文链接：https://blog.csdn.net/stone10086/article/details/73751797

版权

js 同时被 2 个专栏收录

69 篇文章 0 订阅

订阅专栏

ajax

6 篇文章 0 订阅

订阅专栏

效果图：

这里写图片描述

中心思想：
1、利用ajax调用图灵机器人接口获取数据；
3、主要拿到key；

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>机器人对话</title>
        <script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="css/base.css" />
        <!--<link rel="stylesheet" type="text/css" href="css/tuling_style.css" />-->
        <script type="text/javascript">
            (function() {
                var html = document.documentElement;
                var hwidth = html.getBoundingClientRect().width;
                html.style.fontSize = hwidth / 10 + 'px';
            })();
        </script>
        <style type="text/css">
            section {
                width: 100%;
                height: 100vh;
                background: #fff;
                overflow: auto;
            }

            section .head {
                width: 100%;
                height: 2.5rem;
                background: #eee;
                overflow: hidden;
                position: fixed;
                top: 0;
                left: 0;
            }

            section .head .name {
                height: 0.9375rem;
                width: 100%;
                text-align: center;
                line-height: 0.9375rem;
                font-size: 0.5rem;
            }

            section .head .touxiang {
                height: 1.5625rem;
                width: 1.5625rem;
                border-radius: 50%;
                overflow: hidden;
                margin: 0rem auto;
            }

            section .head .touxiang img {
                display: block;
                width: 1.5625rem;
                height: 1.5625rem;
                border-radius: 50%;
            }

            section .talking {
                padding: 2.5rem 0 0.3125rem;
                box-sizing: border-box;
                width: 100%;
                height: auto;
                min-height: calc(94.375%);
                overflow: hidden;
            }

            section .talking .tuling {
                width: 100%;
                height: auto;
                margin-top: 0.3125rem;
            }

            section .talking .tuling label {
                display: block;
                height: 0.9375rem;
                width: 100%;
                line-height: 0.9375rem;
                font-size: 0.5rem;
                padding: 0 0.15625rem;
                box-sizing: border-box;
            }

            section .talking .tuling label img {
                display: inline-block;
                width: 0.9375rem;
                height: 0.9375rem;
                border-radius: 50%;
                margin: 0 0.15625rem;
                vertical-align: middle;
            }

            section .talking .tuling p {
                height: auto;
                width: 60%;
                margin-left: 0.78125rem;
                line-height: 0.78125rem;
                font-size: 0.46875rem;
                text-align: justify;
                word-break: break-word;
            }

            section .talking .me {
                width: 100%;
                height: over;
                overflow: hidden;
                margin-top: 0.3125rem;
            }

            section .talking .me label {
                display: block;
                height: 0.9375rem;
                width: 100%;
                line-height: 0.9375rem;
                font-size: 0.5rem;
                text-align: right;
                padding: 0 0.15625rem;
                box-sizing: border-box;
            }

            section .talking .me label img {
                display: inline-block;
                width: 0.9375rem;
                height: 0.9375rem;
                border-radius: 50%;
                margin: 0 0.15625rem;
                vertical-align: middle;
            }

            section .talking .me p {
                float: right;
                height: auto;
                width: 60%;
                margin-right: 0.9375rem;
                line-height: 0.78125rem;
                font-size: 0.46875rem;
                text-align: justify;
                word-break: break-word;
                text-align: right;
            }

            section .shuru {
                height: 0.9375rem;
                width: 10rem;
                font-size: 0;
            }

            section .shuru input {
                font-size: 0.4375rem;
                vertical-align: top;
                height: 0.9375rem;
                border: 1px solid #999;
                box-sizing: border-box;
            }

            section .shuru input[type=text] {
                width: 8.75rem;
                text-indent: 0.15625rem;
            }

            section .shuru input[type=button] {
                width: 1.25rem;
            }
        </style>
    </head>

    <body>
        <section class="talk">
            <div class="head">
                <div class="name">图灵对话中</div>
                <div class="touxiang">
                    <img src="img/app.png" alt="" />
                </div>
            </div>
            <div class="talking">
                <!--<div class="tuling">
                    <label><img src="img/app.png"/>阿花 :</label>
                    <p></p>
                </div>
                <div class="me">
                    <label>我:<img src="img/me.jpg"/></label>
                    <p></p>
                </div>-->
            </div>

            <div class="shuru">
                <input type="text" name="tex" id="tex" value="" />
                <input type="button" name="btn" id="btn" value="发送" />
            </div>
        </section>
    </body>
    <script type="text/javascript">
        $('#btn').on('touchstart', function() {
            $.ajax({
                type: "get",
                url: "http://www.tuling123.com/openapi/api",
                dataType: "JSON",
                jsonP: "callback",
                data: {
                    'key': 'b8680786b6714ae4953c72d6cde9c556',
                    'info': $('#tex').val(),
                    'userid': '12345678'
                },
                success: function(str) {
                    create(str.text, $('#tex').val());
                }
            });
        });

        function create(text, val, fn) {
            var div1 = document.createElement('div');
            div1.className = 'tuling';
            var a = '<label><img src="img/app.png"/>阿花 :</label><p>' + text + '</p>';
            div1.innerHTML = a;
            var div2 = document.createElement('div');
            div2.className = 'me';
            var b = '<label>我:<img src="img/me.jpg"/></label><p>' + val + '</p>';
            div2.innerHTML = b;
            $('.talking').append(div2);
            $('.talking').append(div1);
            $('#tex').val('');
        }
    </script>

</html>

石界星空

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax做与图灵机器人微信对话

效果图：中心思想： 1、利用ajax调用图灵机器人接口获取数据； 3、主要拿到key；<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>机器人对话</title> <script src="js/jquery-1.10.1.min.js" type="text/javasc
复制链接

扫一扫