php+ajax制作无刷新留言板


Posted in PHP onOctober 27, 2015

本文就是和大家分享一款由php结合ajax实现的无刷新留言板,先给大家看一下最后的效果图:

php+ajax制作无刷新留言板

数据库连接代码如下:

<?php
$conn = @mysql_connect("localhost","root","root") or die ("MySql连接错误");
mysql_select_db("demo",$conn);
mysql_query("set names 'utf8'");
?>

index.php文件代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="bbs.css" type="text/css" rel="stylesheet">
<title>无刷新显示回帖</title>
<script src="bbs.js" type="text/javascript"></script>
</head>

<body>
<h1>无刷新显示回帖</h1>
<div id="thread">
<?php
include("conn.php");
$sql = "select * from `bbs_post` where `threadid` ='1' order by id asc";
$query =mysql_query($sql);
while($row = mysql_fetch_array($query)){ 
?>
 <div class="post" id="post<?php echo $row['id'];?>">
    <div class="post_title"><?php echo $row['title'];?> [<?php echo $row['username'];?>]</div>
    <div class="post_content"><pre><?php echo $row['content'];?></pre></div>
   </div>
<?php
}
?>
</div>

<table class="reply">
<tr>
 <td colspan="2" class="title">回帖<input type="hidden" name="threadid" id="threadid" value="1"></td>
</tr>
<tr>
 <td>姓名:</td>
 <td><input type="text" name="username" id="username"></td>
</tr>
<tr>
 <td>标题:</td>
 <td><input type="text" name="post_title" id="post_title"></td>
</tr>
<tr>
 <td>内容:</td>
 <td><textarea name="post_content" id="post_content"></textarea></td>
</tr>
<tr>
 <td colspan="2"><input type="button" onclick="submitPost()" value="提交"></td>
</tr>
</table>
</body>
</html>

bbspost.php文件代码如下

<?php
include("conn.php");
$title = $_POST["title"]; //获取title
$content = $_POST["content"]; //获取content
$username = $_POST["username"]; //获取username
$threadId = $_POST["threadid"]; //获取threadid


$sql="insert into bbs_post (title,content,username,threadid) " .
 "values ('$title','$content','$username','$threadId')";
 mysql_query($sql);
 //传回最后一次使用 INSERT 指令的 ID
$responseId=mysql_insert_id();
echo $responseId;
?>

bbs.js文件里面包括了大量ajax文件,代码如下

//先创建一个空的bbs.js文件,并修改其属性为utf-8,才能保存中文。
var xmlHttp;      //用于保存XMLHttpRequest对象的全局变量
var username;      //用于保存姓名
var title;       //用于保存标题
var content;      //用于保存内容
var threadid;      //用于保存主题编号

//用于创建XMLHttpRequest对象
function createXmlHttp() {
 //根据window.XMLHttpRequest对象是否存在使用不同的创建方式
 if (window.XMLHttpRequest) {
  xmlHttp = new XMLHttpRequest();     //FireFox、Opera等浏览器支持的创建方式
 } else {
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
 }
}

//提交回帖到服务器
function submitPost() {
 //获取帖子中姓名、标题、内容、主题编号四部分信息
 username = document.getElementById("username").value;
 title = document.getElementById("post_title").value;
 content = document.getElementById("post_content").value;
 threadid = document.getElementById("threadid").value;
 if (checkForm()) {
  createXmlHttp();         //创建XMLHttpRequest对象
  xmlHttp.onreadystatechange = submitPostCallBack; //设置回调函数
  xmlHttp.open("POST", "bbspost.php", true);   //发送POST请求
  //设置POST请求体类型
  xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlHttp.send("username=" + encodeURI(username) +
      "&title=" + encodeURI(title) +
      "&content=" + encodeURI(content) +
      "&threadid=" + threadid);    //发送包含四个参数的请求体
 }
}

//检查表单是否内容已填写完毕
function checkForm() {
 if (username == "") {
  alert("请填写姓名");
  return false;
 } else if (title == "") {
  alert("请填写标题");
  return false;
 } else if (content == "") {
  alert("请填写内容");
  return false;
 }
 return true;
}

//获取查询选项的回调函数
function submitPostCallBack() {
 if (xmlHttp.readyState == 4) {
alert(xmlHttp.responseText);
  createNewPost(xmlHttp.responseText);
 }
}

//创建新的回帖
function createNewPost(postId) {
 //清空当前表单中各部分信息
 document.getElementById("post_title").value = "";
 document.getElementById("post_content").value = "";
 document.getElementById("username").value = "";

 var postDiv = createDiv("post", ""); //创建回帖的外层div
 postDiv.id = "post" + postId;   //给新div赋id值

 var postTitleDiv = createDiv("post_title", title + " [" + username + "]"); //创建标题div
 var postContentDiv = createDiv("post_content", "<pre>" + content + "</pre>"); //创建内容div
 postDiv.appendChild(postTitleDiv);       //在外层div追加标题
 postDiv.appendChild(postContentDiv);      //在外层div追加内容

 document.getElementById("thread").appendChild(postDiv);  //将外层div追加到主题div中
}

//根据className和text创建新的div
function createDiv(className, text) {
 var newDiv = document.createElement("div");
 newDiv.className = className;
 newDiv.innerHTML = text;
 return newDiv;
}

bbs.css文件如下:

/* 页面基本样式 */
body, td, input, textarea {
 font-family:Arial;
 font-size:12px;
}

/* 主题的样式 */
#thread {
 border:1px solid black;
 width:300px;
 margin-bottom:10px;
}

/* 提示信息div的样式 */
#statusDiv {
 border:1px solid #999;
 background:#FFFFCC;
 width:100px;
 position:absolute;
 top:50%;
 left:50%;
 margin:-50px 0 0 -100px;
 width:280px;
}

/* 帖子的样式 */
div.post {
 border-bottom:1px solid black;
 padding:5px;
}

/* 帖子title的样式 */
div.post_title {
 border-bottom:1px dotted #0066CC;
 font-weight:bold;
}

/* 帖子content的样式 */
div.post_content {
 font-size:12px;
 margin:5px;
}

/* 回帖表格基本样式 */
table.reply {
 border-collapse:collapse;
 width:300px;
}

/* 回帖表格单元格样式 */
table.reply td {
 border:1px solid black;
 padding:3px;
}

/* 回帖表格表头样式 */
table.reply td.title {
 background:#003366;
 color:#FFFFFF;
}

/* 表单元素样式 */
input, textarea {
 border:1px solid black;
}

/* 文字区域样式 */
textarea {
 width:200px;
 height:50px;
}

/* 预定义格式样式 */
pre {
 margin:0;
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

PHP 相关文章推荐
PHP实现网上点歌(二)
Oct 09 PHP
一个更简单的无限级分类菜单代码
Jan 16 PHP
php下连接mssql2005的代码
Jan 17 PHP
一个不易被发现的PHP后门代码解析
Jul 05 PHP
PHP判断一个gif图片是否为动态图片的方法
Nov 19 PHP
php+mysql实现简单的增删改查功能
Jul 13 PHP
PHP使用正则表达式获取微博中的话题和对象名
Jul 18 PHP
thinkphp3.x中cookie方法的用法分析
May 19 PHP
基于PHPexecl类生成复杂的报表表头示例
Oct 14 PHP
php使用curl代理实现抓取数据的方法
Feb 03 PHP
PHP实现时间比较和时间差计算的方法示例
Jul 24 PHP
Laravel 验证码认证学习记录小结
Dec 20 PHP
一个完整的php文件上传类实例讲解
Oct 27 #PHP
php邮件发送的两种方式
Apr 28 #PHP
php语言中使用json的技巧及json的实现代码详解
Oct 27 #PHP
php+ajax实现无刷新的新闻留言系统
Dec 21 #PHP
PHP测试成功的邮件发送案例
Oct 26 #PHP
php使用APC实现实时上传进度条功能
Oct 26 #PHP
php需登录的文件上传管理系统
Mar 21 #PHP
You might like
php 动态执行带有参数的类方法
2009/04/10 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python处理圆角图片、圆形图片的例子
2014/04/25 Python
python实现发送邮件功能代码
2017/12/14 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python读取文件名并改名字的实例
2019/01/07 Python
Python切图九宫格的实现方法
2019/10/10 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
介绍Java的内部类
2012/10/27 面试题
explicit和implicit的含义
2012/11/15 面试题
产品工艺师的岗位职责
2013/11/15 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android