声明:目前程序0.0版本仅为实验,并没有对用户输入进行处理,在1.0计划加入以下功能:
1.正则匹配验证email,url
2.特殊字符转义,过滤
3.加入验证码功能
程序清单:
1.index.php 代码核心部分是<script></script>标签中的ajax。参见http://api.jquery.com/jQuery.ajax/
通过向post.php传值,然后用$('#messages').load("messages.php")以ajax的方式更新id = messages 的div
<!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" />
<title>Message Board</title>
<script language="JavaScript" type="text/javascript" src="js/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery.timer.js"></script>
<link href="css/style.css" rel="stylesheet" />
<script type="text/JavaScript">
function postData(){
var name = $('#name').val();
var email = $('#email').val();
var website = $('#website').val();
var message = $('#message').val();
var captcha_code = $('#captcha_code').val();
var dataString = 'name='+ name + '&email=' + email + '&website=' + website + '&message=' + message + '&captcha_code=' + captcha_code;
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
success: function(data) {
console.log('OK: ' + data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('Error: ' + data);
}
});
return true;
}
$(document).ready(function(){
$(".button").click(function() {
if(postData()){
$('#messages').load("messages.php");
};
return false;
});
});
</script>
</head>
<body>
<div id="stylized" class="myform">
<form id="form" name="form" action="#" method="post">
<h1>Post your message</h1>
<p id="error">Please complete the form below</p>
<label>Name</label> <input name="name" type="text" id="name" /> <label>Email</label>
<input name="email" type="text" id="email" /> <label>Website<span
class="small">yourwebsite.com</span>
</label> <input name="website" type="text" id="website"
value="http://" /> <label>Message (Character count: <span id="count">0</span>)
</label>
<textarea name="message" id="message"></textarea>
<label>Security Code <span class="small">Click to refresh</span>
</label> <a href="#" οnclick="refreshCaptcha();"><span id="cap"></span>
</a> <label>Re-type Security Code <span class="small">(case
sensitive)</span>
</label> <input name="captcha_code" type="text" id="captcha_code"
size="10" maxlength="10" />
<button type="submit" class="button">Submit</button>
<div class="spacer"></div>
</form>
</div>
<div style="float: left">
<div id="messages" class="messages">
<!-- posted messages display here -->
</div>
</div>
</body>
</html>
2.post.php
<?php
include ("config.php");
if(isset($_POST['name'])){
$name = $_POST['name'];
}else{
$name = "";
}
if(isset($_POST['email'])){
$email = $_POST['email'];
}else{
$email = "";
}
if(isset($_POST['captcha_code'])){
$security_code = $_POST['captcha_code'];
}else{
$security_code = "";
}
if(isset($_POST['website'])){
$website = $_POST['website'];
}else{
$website = "";
}
if($website=='http://'){
$website = "";
}
if($website!=''){
//if (strpos($website,"http://")==false){
//$website = "http://".$website;
//}
}
if(isset($_POST['message'])){
$message = $_POST['message'];
}else{
$message = "";
}
$ip=$_SERVER['REMOTE_ADDR'];
$insert = "INSERT INTO message_board(name, email, url, post_date, message, ip_address) VALUES('$name', '$email', '$website', now(), '$message', '$ip')";
$mysql_insert = mysql_query($insert)
or die("<b>A fatal MySQL error occured</b>.\n<br />Query: " . $query . "<br />\nError: (" . mysql_errno() . ") " . mysql_error());
exit;
?>
3.messages.php
<?PHP
require_once('config.php');
//echo "<p>Messages loaded: ".date("d/m/y : H:i:s", time())."</p>";
if(isset($_GET['offset'])){
$offset = $_GET['offset'];
}else{
$offset=0;
}
$numresults=mysql_query("SELECT * FROM message_board");
$numrows=mysql_num_rows($numresults)
or die ("Currently you do not have any items.");
$query="SELECT * FROM message_board ORDER BY id desc limit $offset,$limit";//pagination
$result=mysql_query($query);
$num=mysql_num_rows($result);
mysql_close();
//echo "<h1>Showing 10 of $num comments</h1>";
$i=0;
if ($num > 0){
echo '<ol style="list-style-type: none;">';
while ($i < $num) {
$id=mysql_result($result,$i,"id");
$date=mysql_result($result,$i,"post_date");
$email=mysql_result($result,$i,"email");
$url=mysql_result($result,$i,"url");
$name=stripslashes(mysql_result($result,$i,"name"));
$message=stripslashes(mysql_result($result,$i,"message"));
echo "<li>";
//if ($email!=""):
//echo "by <b><a href=mailto:$email target=_blank>$name</a></b><br>";
//else:
echo "<cite>$name</cite> says:<br>";
//endif;
echo "On $date<br>";
if ($url!="") {
echo "URL: <a href=\"$url\" target=\"_blank\">$url</a><br>";
}
echo "<p>$message</p>";
echo "</li>";
$i++;
}
echo '</ol>';
// create paging links below
echo '<p class="button-link">';
if ($offset >= $limit) {
$prevoffset = $offset - $limit;
echo "<a href=\"#\" οnclick=\"loadMessages($prevoffset);\">Back</a> \n";
}
$pages=intval($numrows/$limit);
if ($pages < ($numrows/$limit)){
$pages=($pages + 1);
}
//show next if not last
if (! ( ($offset/$limit) == ($pages - 1) ) && ($pages != 1) ) {
$newoffset = $offset+$limit;
echo "<a href=\"#\" οnclick=\"loadMessages($newoffset);\">Next</a>\n";
}
echo '</p>';
}else{
echo "No entry yet.";
}
?>