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 相关文章推荐
Access数据库导入Mysql的方法之一
Oct 09 PHP
php和js如何通过json互相传递数据相关问题探讨
Feb 26 PHP
php遍历文件夹所有文件子文件夹函数代码
Nov 27 PHP
php查看请求头信息获取远程图片大小的方法分享
Dec 25 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
May 12 PHP
Laravel的throttle中间件失效问题解决方法
Oct 09 PHP
php基于单例模式封装mysql类完整实例
Oct 18 PHP
PHP使用mysqli操作MySQL数据库的简单方法
Feb 04 PHP
PHP巧妙利用位运算实现网站权限管理的方法
Mar 12 PHP
详解php中的implements 使用
Jun 13 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
Aug 30 PHP
PHP implode()函数用法讲解
Mar 08 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 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
PHP强制转化的形式整理
2020/05/22 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
Python中Yield的基本用法
2020/10/18 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
采购主管岗位职责
2014/02/01 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
银行招聘自荐信
2015/03/06 职场文书
写给女朋友的保证书
2015/05/09 职场文书
python异步的ASGI与Fast Api实现
2021/07/16 Python
在项目中使用redis做缓存的一些思路
2021/09/14 Redis