mui开发记录（八）仿qq聊天界面图灵机器人接入

最新推荐文章于 2020-12-23 13:42:42 发布

GUANYX~

最新推荐文章于 2020-12-23 13:42:42 发布

阅读量1.4k

点赞数 1

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/gyx1549624673/article/details/88641840

版权

前端学习笔记专栏收录该内容

56 篇文章 0 订阅

订阅专栏

先上效果图项目代码见https://download.csdn.net/download/gyx1549624673/11033440

一、页面实现

主要的html及js部分

//html处
<div class="mui-content" >
			<!--center start-->
			<div class="center" >
				
			</div>
			<!--center end-->
			<!--send start-->
			<div class="send" style="margin-left: 2px;">
				<div class="mui-input-row " style="width: 84%; display: inline-block; vertical-align: middle;">
					<input id="sendContent"  type="search" class="mui-input-clear mui-input-speech" placeholder="请输入~"  style="background-color: white;">
					
				</div>
				
				<div class="bottom">
					<button id="button">发送</button>
				</div>
			</div>

		</div>







//js处
$(function(){
		
					var htmll = "<div class='left'><img src='img/xiaoting.jpg' width='50' height='50'><span class='msg'>小听知道很多民族乐器哦！来和我聊聊吧~</span></div>"
		
		
					$(".center").append(htmll);
				});
				$("#button").click(function(){
					var content = $("#sendContent").val();
					var center = $(".center");
					// alert(content);
					var htmlr = "<div class='right'><span class='msg'>"+content+"</span><img src='img/job.jpg' width='50' height='50'></div>"
					center.append(htmlr);
					$("#sendContent").val("");

二、图灵机器人接入

主要的js

$.ajax({
						type:"post",
						url:"http://www.tuling123.com/openapi/api?key=d93d7645d9224b018feadff7269aa38f&info="+content,
						success:function(result){
							var obj = result;
							var tmp = "<span>"+obj.text+"</span>"
							if (obj.url) {
								tmp+= "<a href='"+obj.url+"' target='_blank'>"+obj.text+"</a>"
							}
		
							var htmll = "<div class='left'><img src='img/xiaoting.jpg' width='50' height='50'><span class='msg'>"+tmp+"</span></div>"
							center.append(htmll);
							center.scrollTop(center[0].scrollHeight);
						}
					});

图灵机器人需要自己去申请，即可获得相应的apikey