本来想把题目写成“最”简单的AJAX留言本的。。。
但是怕有冗余代码和算法而被人骂。。。
首先说，WEB方面我还算个菜鸟！
我贴这些我自己敲过的例子不是为了炫耀！
而是为了“抛砖引玉”！
新手如果觉得有用的部分就学习一下。。。
最主要的还是希望高手指点，一起讨论。。。
这样大家才能共同提高嘛。。。。
说了那么多废话，下面看代码吧。。。
演示地址：
http://o.99081.com/foxlw/liuyan/
index.html复制PHP内容到剪贴板PHP代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>简单的AJAX留言本</title>
<meta http-equiv="Content-Type" c>
<script src="jquery.js" type="text/javascript"></script>
<script src="tijiao.js" type="text/javascript"></script>
</head>
<body>
<H1><p align="center"><font color="green">简单的AJAX留言本</font></p></H1>
<?php
$path = "DB/"; //定义路径
if(!is_dir($path)){
mkdir($path);
}
$dr = opendir($path); //打开目录
while($filen = readdir($dr)) //循环读取目录中的文件
{
if($filen != "." and $filen != "..")
{
$fs = fopen($path.$filen, "r");
echo "<div id='".$filen."'>";
echo "<B>标题：</B>".fgets($fs);
echo "(<a href=javascript:del('".$filen."')>delete</a>)<br />";
echo "<B>作者：</B>".fgets($fs)."<BR>";
echo "<B>内容：</B><PRE>".fread($fs, filesize($path.$filen))."</PRE>";
echo "<HR>"; //<pre>---可以把原文件中的空格,回车,换行,tab键表现出来
echo "</div>";
fclose($fs);
}
}
closedir($dr) //关闭目录
?>
<div id="msg"></div>
<div id="load" style="display:none;position:fixed;right:0px;top:0px" align="center">
<img src="load.gif" /> <font color="red"><B>LOADING...</B></font>
</div>
<div id="notice"></div>
<H3><p align="center">发表新的留言</p></H3>
<form name="form1" method="post" action="Post.php">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>标题</td>
<td>
<input name="title" type="text" id="title" size="50">
</td>
</tr>
<tr>
<td>作者</td>
<td>
<input name="author" type="text" id="author" size="20">
<font color="red">*</font>
</td>
</tr>
<tr>
<td>内容</td>
<td>
<textarea name="content" cols="50" rows="10" id="content"></textarea>
<font color="red">*</font>
</td>
</tr>
</table>
<p align="center">
<input type="button" value="Submit" id="postInfo">
<input type="reset" value="Reset">
</p>
</form>
</body>
</html>
tijiao.js复制PHP内容到剪贴板PHP代码:
$(function(){
$("#postInfo").click(function(){
var author = $("#author").val();
var title = $("#title").val();
var content = $("#content").val();
if(author==""||content==""){
$("#notice").html("<div align=center><font color=red><b>请填写完整！</b></font></div>");
return false;
}else{
$("#notice").html("");
}
var ly;
$.post("post.php",{title:title,author:author,content:content},function(fname){
ly = "<div id='"+fname+"'>";
ly+= "<B>标题：</B>"+title+"(<a href=javascript:del('"+fname+"')>delete</a>)<br />";
ly+="<B>作者：</B>"+author+"<br /><B>内容：</B><PRE>"+content+"</PRE><hr></div>";
$("#msg").append(ly);
$("#title").val("");
$("#content").val("");
});
});
$("#load").ajaxStart(function(){
$("#load").fadeIn();
});
$("#load").ajaxStop(function(){
$("#load").fadeOut();
});
});
function del(fname) {
// alert(fname);
var fname2="#"+fname;
$(fname2).fadeOut();
$.get("del.php",{id:fname});
//return false;
}
post.php复制PHP内容到剪贴板PHP代码:
<?php
header('Content-Type:text/html;charset=utf-8');
$path = "DB/";
$filename = "S".date("mdHis");
$fp = fopen($path.$filename, "w");
$title = iconv("utf-8","gbk",$_POST["title"]);
$author = iconv("utf-8","gbk",$_POST["author"]);
$content = iconv("utf-8","gbk",$_POST["content"]);
fwrite($fp, $title."\n");
fwrite($fp, $author."\n");
fwrite($fp, $content);
fclose($fp);
echo $filename;
?>
del.php复制PHP内容到剪贴板PHP代码:
<?php
$fname = $_GET['id'];
$filename = "DB/".$fname;
unlink($filename);
?>
