AJAX实例--留言板

原创 2016年05月31日 21:07:47
<!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];
}
}
}

版权声明:本文为博主原创文章,未经博主允许不得转载。

Ajax实例(JAVA)

这是一个用于留言板留言提交与读取的简单实例,不包括回复、编辑与删除等其它管理功能。 本实例的目的在于用一个简单的例子展示如果在java web应用中,用javascript开发Ajax应用。一、web...
  • lijiuu
  • lijiuu
  • 2008年02月07日 23:35
  • 26081

html+php+ajax+mysql留言板 问题总结

1.首页是怎么写 ? 如果首页一开始就需要显示后台的数据,那么引用php,访问信息。                          $result = $conn->query("selec...
  • u012562302
  • u012562302
  • 2017年06月20日 14:16
  • 684

本人最近写的Ajax留言板

Xp Postbook体验Ajax留言板介绍Xp Postbook使用了ajax技术,可以在无刷新的条件下进行各种留言操作;提供了五种页面风格;提供了比较完善的用户管理功能;使用验证码避免垃圾信息的骚...
  • JOHNCOOLS
  • JOHNCOOLS
  • 2006年11月01日 15:25
  • 644

Ajax方式的留言板

ajax.js//************************  建立XML对象  **********************function InitAjax(){    var http_r...
  • baby97
  • baby97
  • 2006年12月27日 10:14
  • 3734

自己写的一个用AJAX实现的留言系统

 //write.aspDry English Online.style1 { font-family: Arial; font-size: 9.0pt; color: black;}.style2 ...
  • deamonchan
  • deamonchan
  • 2006年06月12日 15:51
  • 1233

AJAX实现留言板信息展开

 留言板是目前网络比较流行的、方便的、快捷的一种用来保存留言的网络工具。用户可以通过留言板为网站管理人员留言,也可以作为用户与管理员交流的通信工具。留言板通常应用在企业门户网站、电子商务销售平台网等网...
  • chinazjf
  • chinazjf
  • 2008年07月31日 19:20
  • 2532

《锋利的jQuery》之jQuery与Ajax

jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load()、$.get()、$.post()方法,第3层是$.getScript()和$.getJ...
  • dc_726
  • dc_726
  • 2011年11月27日 15:00
  • 2663

利用Ajax技术写一个迷你留言板WEB控件

初学Ajax不久,自己写个小东西,以作学习日记留言板图片如下:样例地址:http://www.8dao.net/miniguest/首先,这里用的是Access数据库,便于移动。数据库很简单,表Gue...
  • JOHNCOOLS
  • JOHNCOOLS
  • 2006年12月22日 15:00
  • 686

Ajax+JQuery留言特效

Ajax+JQuery留言特效 源代码下载地址:Ajax+JQuery留言特效
  • springmvc_springdata
  • springmvc_springdata
  • 2015年01月06日 09:36
  • 1526

python django实现云端留言板Web应用

功能 制作一个简易留言板,实现留言和查看留言的功能, 留言:输入留言人A,被留言人B,留言信息msg,点击提交可以将留言信息保存的云端(本例不包括数据库,采用文件形式保存) 获取留言:输入用户名...
  • winycg
  • winycg
  • 2018年01月06日 23:56
  • 107
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX实例--留言板
举报原因:
原因补充:

(最多只允许输入30个字)