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

news/2024/7/19 13:36:00 标签: js, ajax, 注册登录验证, 瀑布流

详细解释请看注释

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



http://www.niftyadmin.cn/n/952263.html

相关文章

关于验证控件和javaSript验证的共存问题

关于验证控件和javaSript验证的共存问题

以前一直用验证控件来验证输入格式是否正确&#xff0c;感觉用起来还行。后来有了新的需求&#xff0c;就是两个可以填入任意一个就行&#xff0c;比如说固定电话和手机添一个就可&#xff0c;所以就加了段js如下&#xff1a;this.BtnSave.Attributes.Add("onclick",…
阅读更多...
string类的erase函数属于stl吗_PoEdu培训第四课-C++之STL

string类的erase函数属于stl吗_PoEdu培训第四课-C++之STL

C是由C、object、STL以及泛型等四大块组成的C语言联盟。下面我们就简单的了解以下STL中的string类。我们使用的所有库函数都是编译器帮我们实现的&#xff0c;编译器根据C/C或者其它语言的标准实现相应的库函数。所以有可能导致内个编译器实现的路径不同(版本不同)。在C语言中提…
阅读更多...
dom知识点总结

dom知识点总结

当网页被加载时&#xff0c;浏览器会创建页面的文档对象模型&#xff08;Document Object Model&#xff09;。 Dom:document Object Model&#xff08;文档对象模型&#xff09;简单来说&#xff0c;就是document提供了一些API&#xff08;接口&#xff09;&#xff0c;赋予开…
阅读更多...
转载：.NET 2005 实现在线人数统计

转载：.NET 2005 实现在线人数统计

前几天有个朋友问起如何在.NET 2005中实现网站在线人数的统计&#xff0c;因为我们用的是C#&#xff0c;记得当时在网上找了好久也没找到适和的方法&#xff0c;最近不是很忙&#xff0c;在网上找了一些资料研究了一下&#xff0c;差不多已经能实现了&#xff0c;现将代码共享一…
阅读更多...
python2.7安装教程win10安装不了_Python 2.7的安装（64位win10）

python2.7安装教程win10安装不了_Python 2.7的安装（64位win10）

Python 2.7.12 下载地址&#xff1a;https://www.python.org/downloads/安装路径D:\Program Files\Python27 python环境安装比较简单&#xff0c;下载python语言环境中的windows版本的msi格式文件&#xff0c;下载后双击安装即可。 在安装时选择添加路径到系统中&#xff0c;则…
阅读更多...
转：关于 Global.asax 文件

转：关于 Global.asax 文件

Global.asax 文件&#xff0c;有时候叫做 ASP.NET 应用程序文件&#xff0c;提供了一种在一个中心位置响应应用程序级或模块级事件的方法。你可以使用这个文件实现应用程序安全性以及其它一些任务。下面让我们详细看一下如何在应用程序开发工作中使用这个文件。概述Global.asax…
阅读更多...
一周知识总结（常用封装函数总结）

一周知识总结（常用封装函数总结）

一、常用封装函数 1、获取一个标签到body顶端的距离 function getTop(obj) {var iTop 0;while(obj) {iTop obj.offsetTop;obj obj.offsetParent;//当找不到父节点时为null}return iTop;}2、以几个li为例&#xff0c;找高度最小的li function getShort() {var index 0;var i…
阅读更多...
转： ASP.NET 应用程序生命周期概述

转： ASP.NET 应用程序生命周期概述

本主题概述应用程序生命周期&#xff0c;列出重要的生命周期事件&#xff0c;并描述如何编写适合应用程序生命周期的代码。在 ASP.NET 中&#xff0c;若要对 ASP.NET 应用程序进行初始化并使它处理请求&#xff0c;必须执行一些处理步骤。此外&#xff0c;ASP.NET 只是对浏览器…
阅读更多...
最新文章

Copyright @ 2022~2023