聊天机器人案例

在这里插入图片描述

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;
	}
 ?>

通过json来写

## 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>

通过json来写

猜你喜欢