利用ajax技术从后端获取数据来制作留言本类瀑布流效果

最新推荐文章于 2024-04-28 14:09:16 发布

冰雪为融

最新推荐文章于 2024-04-28 14:09:16 发布

阅读量312

点赞数 1

分类专栏： js学习笔记整理文章标签： js ajax 注册登录验证瀑布流

本文链接：https://blog.csdn.net/lhjuejiang/article/details/79510544

版权

js学习笔记整理专栏收录该内容

56 篇文章 7 订阅

订阅专栏

详细解释请看注释

html代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>留言本</title>
	<link rel="stylesheet" href="css.css" type="text/css" />
    <script src="ajax.js"></script>
    <script src="guestbook.js"></script>
</head>

<body>
	<div id="header"></div>

	<div id="container">

		<div id="list">
		<!--<dl>
				<dt>
					<strong>zmouse</strong> 说 :
				</dt>
				<dd>内容</dd>
				<dd class="t">
					<a href="javascript:;" id="support">顶(<span>0</span>)</a>
					 | 
					<a href="javascript:;" id="oppose">踩(<span>0</span>)</a>
				</dd>
			</dl>-->
		</div>
        <div id="showMore">显示更多...</div>

		<div id="sidebar">
        
        	<div id="user" style="margin-bottom: 10px;">
            	<h4><span id="userinfo"></span> <a href="" id="logout">退出</a></h4>
            </div>
        
			<!-- 注册 -->
			<div id="reg">
				<h4>注册</h4>
				<div>
					<p>用户名：<input type="text" name="username" id="username1"></p>
                    <p id="verifyUserNameMsg"></p>
					<p>密码：<input type="password" name="password" id="password1"></p>
                    <p><input type="button" value="注册" id="btnReg" /></p>
				</div>
			</div>

			<!-- 登陆 -->
			<div id="login">
				<h4>登陆</h4>
				<div>
					<p>用户名：<input type="text" name="username2" id="username2"></p>
					<p>密码：<input type="password" name="password2" id="password2"></p>
                    <p><input type="button" value="登陆" id="btnLogin" /></p>
				</div>
			</div>
			
			<!-- 留言发表 -->
			<div id="sendBox">
				<h4>发表留言</h4>
				<div>
					<textarea id="content"></textarea>
					<input type="button" value="提交" class="btn1" id="btnPost" />
				</div>
			</div>
		</div>

	</div>
	
</body>
</html>

css代码

@charset "utf-8";

body {
	margin: 0; padding: 0;
	background: url("images/bg.gif");
}

h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0;}

a {text-decoration: none; color: #444;}

.hide {
	display: none;
}
.show {
	display: block;
}

.btn1 {
	padding: 0 12px; margin-left: 0px;
	display: inline-block;
	height: 28px; line-height: 28px; font-size: 14px;
	border: 1px solid #D9D9D9; background-color: #FAFAFA;
}

#header {
	position: relative;
	height: 42px; background-color: #FFF; border-bottom: 1px solid #CCC;
}
#wrapper {
	margin: 0 auto; overflow: hidden;
	width: 1000px; height: 42px; border-right: 1px solid #EEE;
}
#wrapper a.loginNav {
	padding: 0 10px; float: right;
	width: 100px; height: 42px; border-left: 1px solid #EEE;
	text-align: center; line-height: 42px;
}
#wrapper a.loginNav:hover {
	color: #9A0000;
}

#container {
	margin: 10px auto; position: relative;
	width: 1000px;
}

#sidebar {
	padding: 10px; position: absolute; top: 0px; right: 0px;
	width: 300px; border: 1px solid #CCC; background-color: white;
}
#sidebar h4 {
	padding: 5px;
	height: 24px; line-height: 24px; background-color: #CCC;
}

#sendBox {
	width: 300px;
}
#sendBox div {
	margin: 5px 0;
}
#sendBox textarea {
	margin-bottom: 5px;
	width: 294px; height: 140px;
}

#list {
	width:	660px;
}
#list dl {
	margin: 0 0 10px 0; padding: 10px;
	border: 1px solid #CCC; background-color: white;
}
#list dt {
	height: 30px; line-height: 30px;
}
#list dd.t {
	text-align: right;
}

#list dd.t a {margin: 0 5px;}

#showMore {
	width:	640px;
	margin: 0 0 10px 0; padding: 10px;
	border: 1px solid #CCC; background-color: white; text-align: center;
	cursor: pointer;
}

js代码

window.onload = function() {
	
	var oUser = document.getElementById('user');
	var oReg = document.getElementById('reg');
	var oLogin = document.getElementById('login');
	var oUserInfo = document.getElementById('userinfo');
	var oList = document.getElementById('list');
	var iPage = 1;
	
	var oShowMore = document.getElementById('showMore');
	
	var oUsername1 = document.getElementById('username1');
	var oVerifyUserNameMsg = document.getElementById('verifyUserNameMsg');
	
	//初始化
	updateUserStatus();
	
	function updateUserStatus() {
		var uid = getCookie('uid');
		var username = getCookie('username');
		if (uid) {
			//如果是登陆状态
			oUser.style.display = 'block';
			oUserInfo.innerHTML = username;
			oReg.style.display = 'none';
			oLogin.style.display = 'none';
		} else {
			oUser.style.display = 'none';
			oUserInfo.innerHTML = '';
			oReg.style.display = 'block';
			oLogin.style.display = 'block';
		}
	}
	
	showList();
	
	/*
	验证用户名
	get
		guestbook/index.php
			m : index
			a : verifyUserName
			username : 要验证的用户名
		返回
			{
				code : 返回的信息代码 0 = 没有错误，1 = 有错误
				message : 返回的信息 具体返回信息
			}
	*/
	oUsername1.onblur = function() {
		ajax('get', 'guestbook/index.php', 'm=index&a=verifyUserName&username=' + this.value, function(data) {
			//alert(data);
			var d = JSON.parse(data);
			
			oVerifyUserNameMsg.innerHTML = d.message;
			
			if (d.code) {
				oVerifyUserNameMsg.style.color = 'red';
			} else {
				oVerifyUserNameMsg.style.color = 'green';
			}
		});
	}
	
	/*
	用户注册
	get/post
		guestbook/index.php
			m : index
			a : reg
			username : 要注册的用户名
			password : 注册的密码
		返回
			{
				code : 返回的信息代码 0 = 没有错误，1 = 有错误
				message : 返回的信息 具体返回信息
			}
	*/
	var oPassword1 = document.getElementById('password1');
	var oRegBtn = document.getElementById('btnReg');
	oRegBtn.onclick = function() {
		
		ajax('post', 'guestbook/index.php', 'm=index&a=reg&username='+encodeURI(oUsername1.value)+'&password=' + oPassword1.value, function(data) {
			var d = JSON.parse(data);
			alert(d.message);
			
		});
		
	}
	
	/*
	用户登陆
	get/post
		guestbook/index.php
			m : index
			a : login
			username : 要登陆的用户名
			password : 登陆的密码
		返回
			{
				code : 返回的信息代码 0 = 没有错误，1 = 有错误
				message : 返回的信息 具体返回信息
			}
	*/
	var oUsername2 = document.getElementById('username2');
	var oPassword2 = document.getElementById('password2');
	var oLoginBtn = document.getElementById('btnLogin');
	oLoginBtn.onclick = function() {
		
		ajax('post', 'guestbook/index.php', 'm=index&a=login&username='+encodeURI(oUsername2.value)+'&password=' + oPassword2.value, function(data) {
			var d = JSON.parse(data);
			alert(d.message);
			
			if (!d.code) {
				updateUserStatus();
			}
			
		});
		
	}
	
	/*
	用户退出
	get/post
		guestbook/index.php
			m : index
			a : logout
		返回
			{
				code : 返回的信息代码 0 = 没有错误，1 = 有错误
				message : 返回的信息 具体返回信息
			}
	*/
	var oLogout = document.getElementById('logout');
	oLogout.onclick = function() {
		
		ajax('get', 'guestbook/index.php', 'm=index&a=logout', function(data) {
			
			var d = JSON.parse(data);
			alert(d.message);
			
			if (!d.code) {
				//退出成功
				updateUserStatus();
			}
			
		});
		
		return false;
		
	}
	
	/*
	留言
	post
		guestbook/index.php
			m : index
			a : send
			content : 留言内容
		返回
			{
				code : 返回的信息代码 0 = 没有错误，1 = 有错误
				data : 返回成功的留言的详细信息
					{
						cid : 留言id	
						content : 留言内容 
						uid : 留言人的id
						username : 留言人的名称
						dateline : 留言的时间戳(秒)
						support : 当前这条留言的顶的数量
						oppose : 当前这条留言的踩的数量
					}
				message : 返回的信息 具体返回信息
			}
	*/
	var oContent = document.getElementById('content');
	var oPostBtn = document.getElementById('btnPost');
	oPostBtn.onclick = function() {
		
		ajax('post', 'guestbook/index.php', 'm=index&a=send&content='+encodeURI(oContent.value), function(data) {
			
			var d = JSON.parse(data);
			alert(d.message);
			oContent.value = '';
			if (!d.code) {
				//添加当前留言到列表中
				createList(d.data, true);
			}
			
		});
		
	}
	
	function createList(data, insert) {
		var oDl = document.createElement('dl');
				
		var oDt = document.createElement('dt');
		var oStrong = document.createElement('strong');
		oStrong.innerHTML = data.username;
		oDt.appendChild(oStrong);
		
		var oDd1 = document.createElement('dd');
		oDd1.innerHTML = data.content;
		
		var oDd2 = document.createElement('dd');
		oDd2.className = 't';
		var oA1 = document.createElement('a');
		oA1.href = '';
		oA1.innerHTML = '顶(<span>'+data.support+'</span>)';
		var oA2 = document.createElement('a');
		oA2.href = '';
		oA2.innerHTML = '踩(<span>'+data.oppose+'</span>)';
		oDd2.appendChild(oA1);
		oDd2.appendChild(oA2);
		
		oDl.appendChild(oDt);
		oDl.appendChild(oDd1);
		oDl.appendChild(oDd2);
		
		if (insert && oList.children[0]) {
			oList.insertBefore(oDl, oList.children[0]);
		} else {
			oList.appendChild(oDl);
		}
	}
	
	//点击显示更多的内容
	oShowMore.onclick = function() {
		iPage++;
		showList();
	}
	
	function showList() {
		/*
		初始化留言列表
		get
			guestbook/index.php
				m : index
				a : getList
				page : 获取的留言的页码，默认为1
				n : 每页显示的条数，默认为10
			返回
				{
					code : 返回的信息代码 0 = 没有错误，1 = 有错误
					data : 返回成功的留言的详细信息
						{
							cid : 留言id	
							content : 留言内容 
							uid : 留言人的id
							username : 留言人的名称
							dateline : 留言的时间戳(秒)
							support : 当前这条留言的顶的数量
							oppose : 当前这条留言的踩的数量
						}
					message : 返回的信息 具体返回信息
				}
		*/
		ajax('get', 'guestbook/index.php', 'm=index&a=getList&n=2&page=' + iPage, function(data) {
			
			var d = JSON.parse(data);
			
			var data = d.data;
			
			if (data) {
				for (var i=0; i<data.list.length; i++) {
					createList(data.list[i]);
				}
			} else {
				if (iPage == 1) {
					oList.innerHTML = '现在还没有留言，快来抢沙发...';
				}
				oShowMore.style.display = 'none';
			}
			
		});
	}
}

function getCookie(key) {
	var arr1 = document.cookie.split('; ');
	for (var i=0; i<arr1.length; i++) {
		var arr2 = arr1[i].split('=');
		if (arr2[0]==key) {
			return arr2[1];
		}
	}
}

冰雪为融

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用ajax技术从后端获取数据来制作留言本类瀑布流效果

详细解释请看注释html代码&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;留言本&lt;/title&gt; &lt;link rel="stylesheet" href="cs
复制链接

扫一扫