AJAX实例--留言板
2016-05-31 21:07
435 查看
<!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数据中的messag
dcc4
e赋给验证信息提示的段落显示出来
//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];
}
}
}
<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数据中的messag
dcc4
e赋给验证信息提示的段落显示出来
//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];
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- Web布局连载——两栏固定布局（五）
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 最后一次说说闭包
- Ajax
- 盒子模型
- CSS选择器
- CSS样式优先权
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- HTML5调用摄像头实例
- 使用Ajax实现异步用户名验证
- 使用ajax实现用户登录验证（升级版）