<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">
<!--<input type="text" class="ta" />
<input type="text" class="wo" />-->
</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>