这个博客展示了如何利用AJAX技术创建一个动态留言板。通过AJAX实现用户注册、登录、留言及显示更多留言等功能，结合CSS和JavaScript实现良好的交互体验。同时，文章提到了如何处理JSON响应以更新页面内容。
<!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>
<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;
b
最低0.47元/天 解锁文章
扫一扫
1144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
