HTMl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
height: 100%;
margin: 0;
padding: 0;
}
.container{
height: 100%;
width: 500px;
margin: 0 auto;
border: 1px solid #0094ff;
}
.message{
width: 100%;
height: 80%;
background-color: yellowgreen;
overflow: scroll;
}
.inputBox{
width: 100%;
height: 20%;
background-color: hotpink;
}
.inputBox input{
height: 100%;
border: none;
/* box-sizing: border-box; */
padding: 0;
margin: 0;
}
.inputBox input:first-child{
width: 80%;
}
.inputBox input:nth-child(2){
width: 19%;
}
.my{
height: 30px;
line-height: 30px;
text-align: left;
font-size: 25px;
color: gray;
background-color: pink;
border: 1px solid #0094ff;
}
.robot{
height: 30px;
line-height: 30px;
text-align: right;
font-size: 25px;
color: white;
background-color: seagreen;
border: 1px solid #0094ff;
}
</style>
</head>
<body>
<div class="container">
<div class="message"></div>
<div class="inputBox">
<input type="text" id="myMessage">
<input type="button" value="发送" id="btnSend">
</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/ajax_tool.js"></script>
<script type="text/javascript">
document.querySelector("#btnSend").onclick=function(){
//获取输入的内容
var inputValue=document.querySelector("#myMessage").value;
//创建出对话框
var myBox=document.createElement("div");
myBox.innerHTML=inputValue;
myBox.classList.add('my');
//添加到界面
document.querySelector(".message").appendChild(myBox);
//发送ajax请求
//在接受到返回的数据时创建对话框
ajax_tool_pro({
url:"chat_pro.php",
data:'message='+inputValue,
method:'post',
success:function(data){
console.log(data);
//创建div
var robotBox=document.createElement('div');
robotBox.innerHTML=data;
robotBox.classList.add('robot');
document.querySelector(".message").appendChild(robotBox);
}
})
}
</script>
PHP
<?php
$message=$_POST['message'];
switch ($message) {
case '你好':
$helloArr=array(
'人家不好',
'好你个头',
'hello world',
'讨厌'
);
$randomKey=array_rand($helloArr,1);
echo $helloArr[$randomKey];
break;
case '吃饭没':
$foodArr=array(
'吃了早饭',
'没有吃哦',
'要邀请我么，我有空哦',
'不去'
);
$randomKey=array_rand($foodArr,1);
echo $foodArr[$randomKey];
break;
default:
$random=array(
'喜洋洋',
'葫芦娃',
'好久不见',
'看见你就烦',
'滚一边去'
);
$randomKey=array_rand($random,1);
echo $random[$randomKey];
break;
}
?>
## info/hello.json
[
"萨瓦迪卡",
"阿尼阿瑟哦",
"hello",
"滚犊子"
]
chat_pro_plus.php
<?php
//获取用户数据
$message=$_POST['message'];
//1.读取json文件，decode转化为php数组，获取随机key，获取内容
switch ($message) {
case '你好':
//读取json文件
$str=file_get_contents('info/hello.json');
$dataArr=json_decode($str);
$randomKey=array_rand($dataArr,1);
echo $dataArr[$randomKey];
break;
default:
# code...
break;
}
?>
chat.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
height: 100%;
margin: 0;
padding: 0;
}
.container{
height: 100%;
width: 500px;
margin: 0 auto;
border: 1px solid #0094ff;
}
.message{
width: 100%;
height: 80%;
background-color: yellowgreen;
overflow: scroll;
}
.inputBox{
width: 100%;
height: 20%;
background-color: hotpink;
}
.inputBox input{
height: 100%;
border: none;
/* box-sizing: border-box; */
padding: 0;
margin: 0;
}
.inputBox input:first-child{
width: 80%;
}
.inputBox input:nth-child(2){
width: 19%;
}
.my{
height: 30px;
line-height: 30px;
text-align: left;
font-size: 25px;
color: gray;
background-color: pink;
border: 1px solid #0094ff;
}
.robot{
height: 30px;
line-height: 30px;
text-align: right;
font-size: 25px;
color: white;
background-color: seagreen;
border: 1px solid #0094ff;
}
</style>
</head>
<body>
<div class="container">
<div class="message"></div>
<div class="inputBox">
<input type="text" id="myMessage">
<input type="button" value="发送" id="btnSend">
</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/ajax_tool.js"></script>
<script type="text/javascript">
document.querySelector("#btnSend").onclick=function(){
//获取输入的内容
var inputValue=document.querySelector("#myMessage").value;
//创建出对话框
var myBox=document.createElement("div");
myBox.innerHTML=inputValue;
myBox.classList.add('my');
//添加到界面
document.querySelector(".message").appendChild(myBox);
//发送ajax请求
//在接受到返回的数据时创建对话框
ajax_tool_pro({
url:"chat_pro_plus.php",
data:'message='+inputValue,
method:'post',
success:function(data){
console.log(data);
//创建div
var robotBox=document.createElement('div');
robotBox.innerHTML=data;
robotBox.classList.add('robot');
document.querySelector(".message").appendChild(robotBox);
}
})
}
</script>