AngularJS中的Ajax(聊天机器人)

最新推荐文章于 2022-12-21 16:43:20 发布

约德尔蒙

最新推荐文章于 2022-12-21 16:43:20 发布

阅读量526

点赞数

分类专栏： AngularJs

本文链接：https://blog.csdn.net/gyq04551/article/details/55667021

版权

AngularJs 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ajax</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #F7F7F7;
		}

		h3 {
			text-align: center;
		}

		.chatbox {
			width: 500px;
			height: 500px;
			margin: 0 auto;
			border: 1px solid #CCC;
			background-color: #FFF;
			border-radius: 5px;
		}

		.messages {
			height: 350px;
			padding: 20px 40px;
			box-sizing: border-box;
			border-bottom: 1px solid #CCC;
			overflow: scroll;
		}

		.messages h5 {
			font-size: 20px;
			margin: 10px 0;
		}

		.messages p {
			font-size: 18px;
			margin: 0;
		}

		.self {
			text-align: left;
		}

		.other {
			text-align: right;
		}

		.form {
			height: 150px;
		}

		.form .input {
			height: 110px;
			padding: 10px;
			box-sizing: border-box;
		}

		.form .btn {
			height: 40px;
			box-sizing: border-box;
			border-top: 1px solid #CCC;
		}

		.form textarea {
			display: block;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			border: none;
			resize: none;
			outline: none;
			font-size: 20px;
		}

		.form input {
			display: block;
			width: 100px;
			height: 30px;
			margin-top: 5px;
			margin-right: 20px;
			float: right;
		}
	</style>
</head>
<body>
	<h3>简单的Ajax实例</h3>
	<div class="chatbox">
		<!-- 聊天内容 -->
		<div class="messages">
		</div>
		<!-- 表单 -->
		<div class="form">
			<!-- 输入框 -->
			<div class="input">
				<textarea></textarea>
			</div>
			<!-- 按钮 -->
			<div class="btn">
				<input type="button" value="发送">
			</div>
		</div>
	</div>
	<script type="text/template">
		<div class="self">
			<h5>我说</h5>
			<p>你好</p>
		</div>
		<div class="other">
			<h5>对方说</h5>
			<p>你好</p>
		</div>
	</script>
	<script>

		var btn = document.querySelector('.btn');
		// 获取输入内容元素
		var input = document.querySelector('textarea');

		// 聊天窗口
		var message = document.querySelector('.messages');

		var item = '', result = '';

		// 实例
		var xhr = new XMLHttpRequest;

		btn.onclick = function () {

			// 创建DOM元素
			item = createMessage('self', input.value);
			// 将创建好的DOM元素添加到聊天窗口
			message.appendChild(item);
			console.log(item);
			// 清空输入框
			input.value = '';

			// 设置请求行
			xhr.open('post', 'chat.php');

			// 设置请求头
			xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

			// 发送请求
			xhr.send();

			// 监听并处理响应结果
			xhr.onreadystatechange = function () {
				if(xhr.readyState == 4) {
					// 接收响应结果
					result = xhr.responseText;

					// 创建DOM元素
					item = createMessage('other', result);
					// 将创建好的DOM元素添加到聊天窗口
					message.appendChild(item);
				}
			}
		}

		// 动态创建DOM
		// flag 代表自已说self 还是对方说other
		// text 代表说话的内空
		function createMessage(flag, text) {
			// 创建结点
			var item = document.createElement('div'),
				h5 = document.createElement('h5'),
				p = document.createElement('p');

			// 添加类
			item.classList.add(flag);

			// 判断主体
			switch(flag) {
				case 'self':
					h5.innerText = '我说';
					break;
				case 'other':
					h5.innerText = '对方说';
					break;
			}

			// 插入文本
			p.innerText = text;

			// 追加节点
			item.appendChild(h5);
			item.appendChild(p);

			return item;

		}

	</script>
</body>
</html>

约德尔蒙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJS中的Ajax(聊天机器人)

Ajax body { margin: 0; padding: 0; background-color: #F7F7F7; } h3 { text-align: center; } .chatbox { width: 500px; height: 500px; margin: 0 auto; border: 1px sol
复制链接

扫一扫

专栏目录