机器人的创建

来源：互联网发布：新津知世编辑：程序博客网时间：2024/05/22 01:32

<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 600px;
overflow: auto;
border: 1px solid blue;
}

.tex{
width: 300px;
height: 30px;
border: 1px solid firebrick;
box-sizing: border-box;
}

.bu{
width: 100px;
height: 30px;
box-sizing: border-box;
}
.ta{
text-align: left;
width: 80%;
padding: 5px;
float: left;

}
.wo{
text-align: right;
width: 80%;
padding: 5px;
float: right;
}

</style>
</head>
<body>
<div class="box">

</div>
<input type="text" class="tex"/>
<input type="button" class="bu" value="发送" />
</body> 以上是html和css样式
<script src="jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>引用JQ文件
<script>

$(function(){
$('.bu').click(function(){

var box=document.querySelector('.box');
var te=document.querySelector('.tex');
$.ajax({
type:"post", 传送方式
url:'http://www.tuling123.com/openapi/api', 域名路径
async:true, 异步执行
dataType:'JSON', json格式
data:{//参数
"key":'b8680786b6714ae4953c72d6cde9c556', key值可以在机器人中文官网注册获取
"info":$('.tex').val(), //关键
"userid":"1238"
},
success:function(str){
var wo=document.createElement('p');//JS添加聊天节点
var ta=document.createElement('p');//JS添加聊天节点

wo.innerHTML=te.value;//赋聊天内容
wo.className='wo'; 赋予类名
ta.innerHTML=str.text;//取返回聊天的值
console.log(str.text);
ta.className='ta';
box.appendChild(wo);
box.appendChild(ta);//创建节点

$('.box').scrollTop($('.box')[0].offsetHeight);//让超过的部分在上面，

te.val("");

}
});

});

});
</script>
</html>

阅读全文

0 0