一个简单的ajax|jquery实现的留言板（未做安全验证）

声明：目前程序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="#" onclick="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,"post_date");
		$email=MysqL_result($result,"email");
		$url=MysqL_result($result,"url");
		$name=stripslashes(MysqL_result($result,"name"));
		$message=stripslashes(MysqL_result($result,"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=\"#\" onclick=\"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=\"#\" onclick=\"loadMessages($newoffset);\">Next</a>\n";
	}

	echo '</p>';

}else{
	echo "No entry yet.";
}
?>

一个简单的ajax|jquery实现的留言板（未做安全验证）

猜你在找的Ajax相关文章