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 一元分词算法
Nov 30 PHP
PHP目录函数实现创建、读取目录教程实例
Jan 13 PHP
理解php Hash函数,增强密码安全
Feb 25 PHP
JS 网站性能优化笔记
May 24 PHP
php daddslashes()和 saddslashes()有哪些区别分析
Oct 26 PHP
PHPMailer邮件发送的实现代码
May 04 PHP
浅析Mysql 数据回滚错误的解决方法
Aug 05 PHP
浅析Yii2中GridView常见操作
Apr 22 PHP
Yii全局函数用法示例
Jan 22 PHP
Yii2.0中使用js异步删除示例
Mar 10 PHP
Laravel框架源码解析之模型Model原理与用法解析
May 14 PHP
PHP RabbitMQ消息列队
May 11 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操作xml
2013/10/27 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Python之reload流程实例代码解析
2018/01/29 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
python super的使用方法及实例详解
2019/09/25 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
幼儿园元旦家长感言
2014/02/27 职场文书
村党支部公开承诺书
2014/05/29 职场文书
创先争优个人承诺书
2014/08/30 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
2014年科研工作总结
2014/12/03 职场文书
邀请函怎么写
2015/01/30 职场文书
信用卡催款律师函
2015/05/27 职场文书
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python