Ajax — 聊天机器人演示

<body><div class="wrap"><!-- 头部 Header 区域 --><div class="header"><h3>小思同学</h3><img src="img/person01.png" alt="icon" /></div><!-- 中间 聊天内容区域 --><div class="main"><ul class="talk_list" style="top: 0px;" id="talk_list"><!-- <li class="left_word"><img src="img/person01.png" /> <span>嗨，最近想我没有？</span></li> --><!-- <li class="right_word"><img src="img/person02.png" /> <span>你好哦</span></li> --></ul><div class="drag_bar" style="display: none;"><div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div></div></div><!-- 底部 消息编辑区域 --><div class="footer"><img src="img/person02.png" alt="icon" /><input type="text" placeholder="说的什么吧..." class="input_txt" id="ipt" /><input type="button" value="发 送" class="input_sub" id="btnSend" /></div></div><!-- 注意：只要为 audio 指定了新的 src 属性，而且指定了 autoplay，那么，语音就会自动播放 --><audio src="" id="voice" autoplay style="display: none;"></audio>//已下是滚动条函数添加<script type="text/javascript" src="js/scroll.js"></script><!-- <script src="./js/chat.js"></script> -->
</body>

//重置文件<link rel="stylesheet" href="css/reset.css" />
//文本主体文件<link rel="stylesheet" href="css/main.css" />body {font-family: 'Microsoft YaHei';
}
.wrap {position: fixed;width: 450px;left: 50%;margin-left: -225px;top: 20px;bottom: 20px;border: 1px solid #ebebeb;background-color: #fff;border-radius: 10px;box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);overflow: hidden;
}
.header {height: 55px;background: linear-gradient(90deg, rgba(246, 60, 47, 0.6), rgba(128, 58, 242, 0.6));overflow: hidden;
}
.header h3 {color: #faf3fc;line-height: 55px;font-weight: normal;float: left;letter-spacing: 2px;margin-left: 25px;font-size: 18px;text-shadow: 0px 0px 5px #944846;
}
.header img {float: right;margin: 7px 25px 0 0;border-radius: 20px;box-shadow: 0 0 5px #f7f2fe;
}
.main {position: absolute;left: 0;right: 0;top: 55px;bottom: 55px;background-color: #f4f3f3;box-sizing: border-box;padding: 10px 0;overflow:hidden;
}
.talk_list{position: absolute;width:100%;left:0px;top:0px;
}
.talk_list li {overflow: hidden;margin: 20px 0px 30px;
}
.talk_list .left_word img {float: left;margin-left: 20px;
}
.talk_list .left_word span {float: left;background-color: #fe9697;padding: 10px 15px;max-width: 290px;border-radius: 12px;font-size: 16px;color: #fff;margin-left: 13px;position: relative;line-height: 24px;
}
.talk_list .left_word span:before {content: '';position: absolute;left: -8px;top: 3px;width: 13px;height: 12px;background: url('../img/corner01.png') no-repeat;
}
.talk_list .right_word img {float: right;margin-right: 20px;
}
.talk_list .right_word span {float: right;background-color: #fff;padding: 10px 15px;max-width: 290px;border-radius: 12px;font-size: 16px;color: #000;margin-right: 13px;position: relative;line-height: 24px;
}
.talk_list .right_word span:before {content: '';position: absolute;right: -8px;top: 3px;width: 13px;height: 12px;background: url('../img/corner02.png') no-repeat;
}
.drag_bar{position:absolute;right:0px;top:0px;background-color: #fff;height:100%;width:6px;box-sizing:border-box;border-bottom:1px solid #f4f3f3;
}
.drager{position:absolute;left:0px;top:0px;background-color: #cdcdcd;height:100px;width:6px;border-radius:3px;cursor: pointer;
}.footer{width:100%;height: 55px;left:0px;bottom:0px;background-color:#fff;position: absolute;
}.footer img{float: left;margin:8px 0 0 20px;
}.input_txt{float: left;width:270px;height:37px;border:0px;background-color: #f4f3f3;margin:9px 0 0 20px;border-radius:8px;padding:0px;outline:none;text-indent:15px;
}
.input_sub{float: left;width:70px;height:37px;border:0px;background-color: #fe9697;margin:9px 0 0 15px;border-radius:8px;padding:0px;outline:none;color:#fff;cursor: pointer;    
}

以下引入文件请自行下载：<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script><script type="text/javascript" src="js/jquery-ui.min.js"></script><script type="text/javascript" src="js/jquery.mousewheel.js"></script>
//* http://jqueryui.com
//(http://brandon.aaron.sh)

$(function () {// 初始化右侧滚动条// 这个方法定义在scroll.js中resetui()// 为发送按钮绑定鼠标点击事件$('#btnSend').on('click', function () {var text = $('#ipt').val().trim()if (text.length <= 0) {return $('#ipt').val('')}// 如果用户输入了聊天内容，则将聊天内容追加到页面上显示$('#talk_list').append('<li class="right_word"><img src="img/person02.png" /> <span>' + text + '</span></li>')$('#ipt').val('')// 重置滚动条的位置resetui()// 发起请求，获取聊天内容getMsg(text)})// 获取聊天机器人发送回来的消息function getMsg(text) {$.ajax({method: 'GET',url: 'http://www.liulongbin.top:3006/api/robot',data: {spoken: text},success: function (res) {// console.log(res)if (res.message === 'success') {// 接收聊天消息var msg = res.data.info.text$('#talk_list').append('<li class="left_word"><img src="img/person01.png" /> <span>' + msg + '</span></li>')// 重置滚动条的位置resetui()// 调用 getVoice 函数，把文本转化为语音getVoice(msg)}}})}// 把文字转化为语音进行播放function getVoice(text) {$.ajax({method: 'GET',url: 'http://www.liulongbin.top:3006/api/synthesize',data: {text: text},success: function (res) {// console.log(res)if (res.status === 200) {// 播放语音$('#voice').attr('src', res.voiceUrl)}}})}// 为文本框绑定 keyup 事件$('#ipt').on('keyup', function (e) {// console.log(e.keyCode)if (e.keyCode === 13) {// console.log('用户弹起了回车键')$('#btnSend').click()}})
})