聲明:目前程式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<spanclass="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="#" onclick="refreshCaptcha();"><span id="cap"></span></a> <label>Re-type Security Code <span class="small">(casesensitive)</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
<?phpinclude ("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
<?PHPrequire_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 belowecho '<p class="button-link">';if ($offset >= $limit) {$prevoffset = $offset - $limit;echo "<a href=\"#\" onclick=\"loadMessages($prevoffset);\">Back</a> \n";}$pages=intval($numrows/$limit);if ($pages < ($numrows/$limit)){$pages=($pages + 1);}//show next if not lastif (! ( ($offset/$limit) == ($pages - 1) ) && ($pages != 1) ) {$newoffset = $offset+$limit;echo "<a href=\"#\" onclick=\"loadMessages($newoffset);\">Next</a>\n";}echo '</p>';}else{echo "No entry yet.";}?>