1.超超超超级简易的聊天机器人,只会说“你好”
连接php之后,不管后端接收到啥信息只输出“你好”给前段,这样前段就可以发啥对面都会说“你好”。
–php部分
<?php
echo "你好!";
-html部分
<h2>第一版</h2>
<input type="text" class="myContent">
<input type="button" value="发送" class="sentBtn">
<h3>聊天框</h3>
<ul class="allContent"></ul>
<script>
var sentBtn = document.getElementsByClassName('sentBtn')[0];
var allContent = document.getElementsByClassName('allContent')[0];
var my = document.getElementsByClassName('myContent')[0]
sentBtn.onclick = function(){
// 获取到“我”在聊天输入框的内容
var myCon = my.value;
// 创建li
var myCon_li = document.createElement('li');
// 给li设置class名,有已经设置好的样式
myCon_li.className = "my";
// 把在输入框获取到的内容 赋值给li的innerHTML
myCon_li.innerHTML = myCon;
// 把li插入到界面的ul中
allContent.append(myCon_li);
// 一步步的写异步请求,引入了jquery之后可以用ajax简洁一下代码
var xhr = new XMLHttpRequest();
// 随机回复消息,不加数据;后端也不接受,so whatever
xhr.open('get','chat_robot_1.php');
xhr.send();
// 检测状态变化,确认数据接收并成功之后,进行下一步
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >=200 && xhr.status < 300 || xhr.status ===304){
// 确认状态都正确,此时,是已经接收到后端传来的“你好”了,跟“我”的聊天
// 内容一样,创建li,插入到聊天框ul中
var herCon = document.createElement('li');
herCon.innerHTML = xhr.responseText;
herCon.className = "her";
allContent.append(herCon);
}else{
console.log('没有收到信息');
}
}
}
}
</script>
2.第二个版本的会说其他话啦。在php中人工创建一个数组,在里面放了常用的几句话,输出的使用array_rand,随机输出。
这次使用JQuery,代码简洁。借鉴一下不同的思路。
注意:①这也是不需要用到信息发送和接收查询哒,所以前段可以不发任何数据。
②在第一版的基础上,对聊天框布局优化了一下,有头像和聊天内容,分别用a和p标签包裹。
③创建聊天内容的方法也不同,第一版使用了创建元件、设置元素内容、插入元素,这里是预先写好一段对话,设为display :none,在点击“发送”按钮之后,克隆预先写好的“我”的聊天,更改为当前输入的内容;在接收到后端返回的数据之后,也使用克隆预先写好的,更改内容。
—php
<?php
header('content-type:text/html;charset=utf-8');
sleep(1);
$chatArr = array(
"不喜欢你啦",
"讨厌你啦",
"吃醋!",
"哼╭(╯^╰)╮"
);
// array_rand返回的是一个随机的下标
$num = array_rand($chatArr,1);
echo $chatArr[$num];
—html部分(使用了Jquery)
<h2>第二版在线机器人</h2>
<div class="container">
<div class="message">
<div class="robot">
<a href="#" class="f_r"></a>
<p class="f_r">雯宝宝</p>
</div>
<!-- 已经存在并且隐藏的自己的聊天框 -->
<div id="hidden_self" class="self" style="display:none;">
<a href="#" class="f_r"></a>
<p class="f_r">123</p>
</div>
</div>
<div class="control">
<input type="text" name="" id="" class="inputBox">
<button class="sentBtn">发送</button>
</div>
</div>
<script>
$(function(){
$('.sentBtn').click(function(){
// 创建自己的聊天框
// 每次都克隆初始的第一个
var $cloneSelf = $('.self').first().clone();
// 添加到容器中
$('.message').append($cloneSelf);
$cloneSelf.show();
// 获取输入框的内容,设置给克隆的 元素内部的p标签
$cloneSelf.find('p').html($('.inputBox').val());
// ajax请求部分
var xhr = new XMLHttpRequest();
xhr.open('post','chat_robot_2.php');
// 随机返回消息,不需要对输入的信息进行获取,所以post的请求头可以不加数据
xhr.onload = function(){
var $cloneRobot = $('.robot').first().clone();
$('.message').append($cloneRobot);
$cloneRobot.find('p').html(xhr.responseText);
}
xhr.send()
});
});
</script>
3.第三个版本使用了图灵机器人,我的哪里出现了问题,没有出现预期的效果。
注意:在第二版的基础上改动了一些。②xhr.open()中接入的地址就是图灵机器人的地址,而不是之前的php地址,
—有改动部分
$(function(){
$('.sentBtn').click(function(){
// 创建自己的聊天框
// 每次都克隆初始的第一个
var $cloneSelf = $('.self').first().clone();
// 添加到容器中
$('.message').append($cloneSelf);
$cloneSelf.show();
// 获取输入框的内容,设置给克隆的 元素内部的p标签
$cloneSelf.find('p').html($('.inputBox').val());
// ajax请求部分
var xhr = new XMLHttpRequest();
// 接入图灵机器人的地址
xhr.open('post','header("Access-Control-Allow-Origin:http://openapi.tuling123.com/openapi/api/v2")');
// 在这里需要获取post请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.onload = function(){
var $cloneRobot = $('.robot').first().clone();
$('.message').append($cloneRobot);
$cloneRobot.find('p').html(xhr.responseText);
}
// 在send中加入post的数据
xhr.send('key=244105773c424facb37c5b0866368958&info='+$('.inputBox').val())
});
});
</script>