关闭

AJAX实例--留言板

标签: AJAXjavascripthtmlcss瀑布流 留言板
339人阅读 评论(0) 收藏 举报
分类:
<!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.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;
}


ajax.js


function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

if (method == 'get' && data) {
url += '?' + data;
}

xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}

xhr.onreadystatechange = function() {

if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
} else {
alert('出错了,Err:' + xhr.status);
}
}

}
}



guestbook.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);//json数据解析

oVerifyUserNameMsg.innerHTML = d.message;//json数据中的message赋给验证信息提示的段落显示出来
//code=1,不能注册,code=0能注册,在IndexController.class.php中定义
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);

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:13306次
    • 积分:457
    • 等级:
    • 排名:千里之外
    • 原创:32篇
    • 转载:8篇
    • 译文:0篇
    • 评论:0条
    文章存档