您所在位置：主题：[原创]最近刚刚写的 jquery+ajax+xml+php简单留言板
snake1220
[专家分：0] 发布于 2008-08-16 22:52:00
演示地址 http://www.cnjquery.com/demo/gb/guestbook.html
话不多说，如果哦看不明白的去论坛上发帖
guestbook.html
<!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>
<title>无刷jquery php xml 留言板版</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0; padding:0}
ul {list-style:none}
#msglist{width:800px; vertical-align:text-top; margin:20px auto 0px auto; }
dt{background:url(wtp-m.png);padding:5px}
dl{border:solid 1px #8db2e3}
dd{padding:5px}
#page span{cursor: pointer;}
#commentformbox{width:800px;vertical-align:text-top;margin:20px auto 0px auto; }
#commentformbox TEXTAREA{width:400px;height:100px;vertical-align:text-top;margin:20px auto 0px auto; }
</style>
<SCRIPT LANGUAGE="JavaScript" src="js/jquery-1.2.6.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function() {
function load_msg(page)
{
$('#state').html("当前状态:正在加载数据请稍等....");
page=$(this).html();
page=page=="undefined"?1:page;
$.post("comments-ajax.php",{action:"load",page:page},function(data){
//alert($(data).find("span").text());
$('#commentlist dl').html(data); // 追加留言数据
$('#commentlist dl').find("span").bind("click",load_msg);
$('#state').html("当前状态:数据加载完毕");
})
}
load_msg();
if ($('#commentform').length) {
$('#commentform').submit(function(){
jQuery.ajax({
url: 'comments-ajax.php', // 这里要改为 comments-ajax.php 文件的位置
data: $('#commentform').serialize(), // 从表单中获取数据
type: 'POST', // 设置请求类型为 ‘POST’，默认为 ‘GET’
beforeSend: function() {
$('#state').html("当前状态:正在发送数据。。。。");
},
error: function(request) {
$('#state').html(request.responseText);
},
success: function(data) {
$('textarea').each(function(){
this.value='';
});
$('#state').html("当前状态:发布数据成功");
$('#commentlist dl').prepend(data); // 追加留言数据
$('#commentform :input').attr('disabled', true);
$('#commentformbox').fadeOut(1000);
$('#commentload').hide();
setTimeout(function() { // 提交留言 15 秒后方可再次提交新留言
$('#commentform :input').removeAttr('disabled');
$('#commentformbox').fadeIn(15000);
}, 5000);
}
});
return false;
});
}
})
//-->
</SCRIPT>
<body>
<div ID="state">当前状态</div>
<div ID="msglist">
<div id="commentlist">
<dl>
</dl>
</div>
</div>
<div id=commentformbox>
<FORM METHOD=POST ACTION="" ID="commentform">
<TEXTAREA NAME="Content" ROWS="" COLS=""></TEXTAREA><br><INPUT TYPE="submit" value="发布信息">
</FORM>
</div>
</body>
comments-ajax.php
<?php
//==========================================
// 文件名: comments-ajax.php
// 说 明: 简单的jquery php XML 留言簿
// power by cnjquery.com
//==========================================
if ($_SERVER["REQUEST_METHOD"] != "POST") {
header('Allow: POST');
header("HTTP/1.1 405 Method Not Allowed");
header("Content-type: text/plain");
exit;
}
class guestbook extends DOMDocument
{
var $pagenum=10;
public function __construct()
{
parent:: __construct();
if (!file_exists("guestbook.xml"))
{
$xmlstr = "<?xml version='1.0'?><msglist></msglist>";
$this->loadXML($xmlstr);
$this->save("guestbook.xml");
}
else
$this->load("guestbook.xml");
}
public function loadMessage($page)
{
$page=($page>0)?$page:1;
$num=($page-1)*$this->pagenum;
$roots = $this->getElementsByTagName( "msglist" );
//print_r($roots);
$root=$roots->item(0);
$msg=$root->getElementsByTagName( "msg" );
$total=$msg->length;
// echo $total;
$totalpage=ceil($total/$this->pagenum);
$totalpage=$totalpage?$totalpage:1;
$startid=$total<$num?$total:$total-$num;
$listnum=$startid>$this->pagenum?$startid-$this->pagenum:0;
//echo $startid;
//echo $listnum;
for($i=$startid-1;$i>=$listnum;$i--)
{
echo "<dt> ip:".$msg->item($i)->getElementsByTagName("ip")->item(0)->nodeValue." time:".$msg->item($i)->getElementsByTagName("time")->item(0)->nodeValue."</dt><dd>".trim(nl2br($msg->item($i)->getElementsByTagName("content")->item(0)->nodeValue))."</dd>";
}
echo "<dt ID=page>";
for($i=1;$i<=$totalpage;$i++)
{
echo " <span>".$i."</span>";
}
echo "</dt>";
}
public function saveMessage($clientIP,$clientTime,$postContent)
{
$msglists = $this->getElementsByTagName( "msglist" );
$msglist = $msglists->item(0);
$msg = $this->createElement( "msg" );
$ip = $this->createElement( "ip" );
$ip->appendChild( $this->createTextNode($clientIP) );
$msg->appendChild($ip);
$time=$this->createElement( "time" );
$time->appendChild( $this->createTextNode($clientTime) );
$msg->appendChild($time);
$content=$this->createElement( "content" );
$content->appendChild( $this->createCDATASection(nl2br(SafeHtml($_POST["Content"]))) );
$msg->appendChild($content);
$msglist->insertBefore ($msg);
$this->save("guestbook.xml");
echo "<dt> ip:".$clientIP." time:".$clientTime."</dt><dd>".$postContent."</dd>";
}
}
$guestbook = new guestbook;
if($_POST["action"]=="load")
{
$guestbook->loadMessage(intval($_POST["page"]));
exit;
}
$IP=$_SERVER["SERVER_ADDR"];
$time=date("Y-m-d H:i:s");
$content=nl2br(SafeHtml($_POST["Content"]));
$guestbook->saveMessage($IP,$time,$content);
exit;
//http://hellobmw.com/archives/ajax-comments-with-jquery-for-wordpress.html
Function SafeHtml($msg = "",$clear_script=true)
{
if(empty($msg))
{
return false;
}
$msg = str_replace('&','&',$msg);
$msg = str_replace(' ',' ',$msg);
if(get_magic_quotes_gpc())
{
$msg = str_replace("\'","'",$msg);
$msg = str_replace('\"',""",$msg);
}
else
{
$msg = str_replace("'","'",$msg);
$msg = str_replace('"',""",$msg);
}
$msg = str_replace("<","<",$msg);
$msg = str_replace(">",">",$msg);
$msg = str_replace("\t"," ",$msg);
$msg = str_replace("\r","",$msg);
$msg = str_replace(" "," ",$msg);
if($clear_script)
{
$msg = preg_replace("/<script(.*?)<\/script>/is","",$msg);
$msg = preg_replace("/<frame(.*?)>/is","",$msg);
$msg = preg_replace("/<iframe(.*?)>/is","",$msg);
$msg = preg_replace("/<\/fram(.*?)>/is","",$msg);
}
return $msg;
}
?>
话不多说，如果哦看不明白的去论坛上发帖
guestbook.html
<!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>
<title>无刷jquery php xml 留言板版</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0; padding:0}
ul {list-style:none}
#msglist{width:800px; vertical-align:text-top; margin:20px auto 0px auto; }
dt{background:url(wtp-m.png);padding:5px}
dl{border:solid 1px #8db2e3}
dd{padding:5px}
#page span{cursor: pointer;}
#commentformbox{width:800px;vertical-align:text-top;margin:20px auto 0px auto; }
#commentformbox TEXTAREA{width:400px;height:100px;vertical-align:text-top;margin:20px auto 0px auto; }
</style>
<SCRIPT LANGUAGE="JavaScript" src="js/jquery-1.2.6.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function() {
function load_msg(page)
{
$('#state').html("当前状态:正在加载数据请稍等....");
page=$(this).html();
page=page=="undefined"?1:page;
$.post("comments-ajax.php",{action:"load",page:page},function(data){
//alert($(data).find("span").text());
$('#commentlist dl').html(data); // 追加留言数据
$('#commentlist dl').find("span").bind("click",load_msg);
$('#state').html("当前状态:数据加载完毕");
})
}
load_msg();
if ($('#commentform').length) {
$('#commentform').submit(function(){
jQuery.ajax({
url: 'comments-ajax.php', // 这里要改为 comments-ajax.php 文件的位置
data: $('#commentform').serialize(), // 从表单中获取数据
type: 'POST', // 设置请求类型为 ‘POST’，默认为 ‘GET’
beforeSend: function() {
$('#state').html("当前状态:正在发送数据。。。。");
},
error: function(request) {
$('#state').html(request.responseText);
},
success: function(data) {
$('textarea').each(function(){
this.value='';
});
$('#state').html("当前状态:发布数据成功");
$('#commentlist dl').prepend(data); // 追加留言数据
$('#commentform :input').attr('disabled', true);
$('#commentformbox').fadeOut(1000);
$('#commentload').hide();
setTimeout(function() { // 提交留言 15 秒后方可再次提交新留言
$('#commentform :input').removeAttr('disabled');
$('#commentformbox').fadeIn(15000);
}, 5000);
}
});
return false;
});
}
})
//-->
</SCRIPT>
<body>
<div ID="state">当前状态</div>
<div ID="msglist">
<div id="commentlist">
<dl>
</dl>
</div>
</div>
<div id=commentformbox>
<FORM METHOD=POST ACTION="" ID="commentform">
<TEXTAREA NAME="Content" ROWS="" COLS=""></TEXTAREA><br><INPUT TYPE="submit" value="发布信息">
</FORM>
</div>
</body>
comments-ajax.php
<?php
//==========================================
// 文件名: comments-ajax.php
// 说 明: 简单的jquery php XML 留言簿
// power by cnjquery.com
//==========================================
if ($_SERVER["REQUEST_METHOD"] != "POST") {
header('Allow: POST');
header("HTTP/1.1 405 Method Not Allowed");
header("Content-type: text/plain");
exit;
}
class guestbook extends DOMDocument
{
var $pagenum=10;
public function __construct()
{
parent:: __construct();
if (!file_exists("guestbook.xml"))
{
$xmlstr = "<?xml version='1.0'?><msglist></msglist>";
$this->loadXML($xmlstr);
$this->save("guestbook.xml");
}
else
$this->load("guestbook.xml");
}
public function loadMessage($page)
{
$page=($page>0)?$page:1;
$num=($page-1)*$this->pagenum;
$roots = $this->getElementsByTagName( "msglist" );
//print_r($roots);
$root=$roots->item(0);
$msg=$root->getElementsByTagName( "msg" );
$total=$msg->length;
// echo $total;
$totalpage=ceil($total/$this->pagenum);
$totalpage=$totalpage?$totalpage:1;
$startid=$total<$num?$total:$total-$num;
$listnum=$startid>$this->pagenum?$startid-$this->pagenum:0;
//echo $startid;
//echo $listnum;
for($i=$startid-1;$i>=$listnum;$i--)
{
echo "<dt> ip:".$msg->item($i)->getElementsByTagName("ip")->item(0)->nodeValue." time:".$msg->item($i)->getElementsByTagName("time")->item(0)->nodeValue."</dt><dd>".trim(nl2br($msg->item($i)->getElementsByTagName("content")->item(0)->nodeValue))."</dd>";
}
echo "<dt ID=page>";
for($i=1;$i<=$totalpage;$i++)
{
echo " <span>".$i."</span>";
}
echo "</dt>";
}
public function saveMessage($clientIP,$clientTime,$postContent)
{
$msglists = $this->getElementsByTagName( "msglist" );
$msglist = $msglists->item(0);
$msg = $this->createElement( "msg" );
$ip = $this->createElement( "ip" );
$ip->appendChild( $this->createTextNode($clientIP) );
$msg->appendChild($ip);
$time=$this->createElement( "time" );
$time->appendChild( $this->createTextNode($clientTime) );
$msg->appendChild($time);
$content=$this->createElement( "content" );
$content->appendChild( $this->createCDATASection(nl2br(SafeHtml($_POST["Content"]))) );
$msg->appendChild($content);
$msglist->insertBefore ($msg);
$this->save("guestbook.xml");
echo "<dt> ip:".$clientIP." time:".$clientTime."</dt><dd>".$postContent."</dd>";
}
}
$guestbook = new guestbook;
if($_POST["action"]=="load")
{
$guestbook->loadMessage(intval($_POST["page"]));
exit;
}
$IP=$_SERVER["SERVER_ADDR"];
$time=date("Y-m-d H:i:s");
$content=nl2br(SafeHtml($_POST["Content"]));
$guestbook->saveMessage($IP,$time,$content);
exit;
//http://hellobmw.com/archives/ajax-comments-with-jquery-for-wordpress.html
Function SafeHtml($msg = "",$clear_script=true)
{
if(empty($msg))
{
return false;
}
$msg = str_replace('&','&',$msg);
$msg = str_replace(' ',' ',$msg);
if(get_magic_quotes_gpc())
{
$msg = str_replace("\'","'",$msg);
$msg = str_replace('\"',""",$msg);
}
else
{
$msg = str_replace("'","'",$msg);
$msg = str_replace('"',""",$msg);
}
$msg = str_replace("<","<",$msg);
$msg = str_replace(">",">",$msg);
$msg = str_replace("\t"," ",$msg);
$msg = str_replace("\r","",$msg);
$msg = str_replace(" "," ",$msg);
if($clear_script)
{
$msg = preg_replace("/<script(.*?)<\/script>/is","",$msg);
$msg = preg_replace("/<frame(.*?)>/is","",$msg);
$msg = preg_replace("/<iframe(.*?)>/is","",$msg);
$msg = preg_replace("/<\/fram(.*?)>/is","",$msg);
}
return $msg;
}
?>