无刷新翻页
无刷新评论
字数限制
提交时间限制
http://www.corange.cn//uploadfiles/12151_75475.jpg

<!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></title>
<link rel="stylesheet" type="text/css" href="comment-style.css" media="screen" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">


var loaderImage = new Image();
loaderImage.src = 'images/loader.gif';

$(document).ready(function(){
var messageArea = $('textarea#message');
messageArea.val('Leave your message here...').css('color', '#666666');
$('div#content').load('show_main2.php');
messageArea.click(function (){
$(this).val('').css('color', '#000000');
$(this).unbind('click').click(function(){
return false;
});
});

$('input#submit-comment').click(function(){
// Store vars
var message = messageArea.hide().val();
// Validation
if(message.length < 1 || message == "Leave your message here..."){
messageArea.fadeOut('slow', function(){
var errorMessage = 'Oops! You haven&#8217;t typed anything. Please have another go...';
var error = $('<div id="too-short"><span class="error">' + errorMessage + '</span></div>').insertBefore($(this));
error.hide().fadeIn('slow', function(){
setTimeout(function(){
error.hide();
messageArea.fadeIn('slow');
}, 2000);
});
});
return false;
}

var dataString = 'message='+ message;


// Show loader
var loader = $('<div id="loader"><img class="load-gif" src="' + loaderImage.src + '" /></div>').insertBefore($(this));

//alert (dataString);
$.ajax({
type: "POST",
url: "submitComment.php",
data: dataString,
success: function(data) {
$('div#loader').find('img.load-gif').remove();
$('div#loader').append('<span class="success">Thanks for your comment!</span>');
//$('div#content').hide();
$('div#content').load('show_main2.php'); //如果不需要审核，就加入这一行会重新载入刚刚添加的
$('div#loader').hide().fadeIn('slow');
$('span.limit').remove();
$('div#comments').prepend(data);
$('div#comments div.comment-unapproved:nth-child(1)').hide().slideDown('slow');
$('input#submit-comment').unbind('click').click(function(){
return false;
});
}
});
return false;
});
messageArea.keyup(function(){
var limit = 140;
var currentLength = $(this).val().length;
var charsLeft = limit - currentLength;
$('span.limit').html(charsLeft);
if(currentLength >= limit){
$(this).val($(this).val().substring(0, limit));
$('span.limit').html('0');
var textarea = document.getElementById('message');
textarea.scrollTop = textarea.scrollHeight + 9999;
}
});
});
</script>
</head>

<body onLoad="viewpage(1)">

<div id="container">
<div id="content">
</div>
<div id="submission">
<form name="comment-submission">
<textarea id="message" name="message"></textarea>
<span class="limit">140</span>
<input type="submit" id="submit-comment" value=" " />
</form>
<div class="clear"></div>
</div>
</div>

</body>
</html>
完整文件打包下载
http://www.corange.cn//uploadfiles/old_ajaxpage_78076.rar
数据库结构
CREATE TABLE `shoutbox` (
`id` int(11) NOT NULL auto_increment,
`content` varchar(255) NOT NULL default '',
`date` datetime NOT NULL default '0000-00-00 00:00:00',
`classid` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

原文地址:http://www.corange.cn/archives/2010/12/3752.html