个人博客—获取博文列表
- 页面加载时默认获取5条博文；
默认显示5条博文
- 每个博文默认显示前两百字；
每个博文默认显示200字
- 点击显示全部则显示当前博文的全部内容；
点击显示全部按钮
- 点击收起则恢复显示200字；
- 点击评论，则显示评论信息列表，和发表评论表单，再次点击评论按钮则隐藏；
点击评论按钮加载中
点击评论按钮加载完成
- 如果评论数小于等于2条，则显示全部评论，不显示加载更多评论按钮；
评论数不大于2条
- 如果评论数大于2条，则显示2条评论，并显示加载更多评论按钮；
评论数大于2条
- 点击加载更多评论按钮，则再显示2条，直到最后一次小于等于2条时，隐藏加载更多按钮；
点击加载更多评论按钮
所有评论加载完成
- 输入评论内容，点击发表评论按钮，则将评论信息和用户名及当前时间写入数据库，并在评论列表最上方显示最新评论；
点击发表评论按钮
评论发表成功
最新评论显示
html部分
无
js部分
$.ajax({
url : 'php/show_issue.php',
type : 'POST',
success : function (response) {
var json = JSON.parse(response);
// 调用请求成功处理函数
ajax_issue_success(json);
}
});
// ajax请求显示博文，请求成功处理函数
function ajax_issue_success(json){
var html = '',
arr = [],
summary = [];
// 遍历返回的数据前10篇文章
for(var i=0; i<5; i++){
html += create_issue(json[i]); //调用create_issue函数
}
// 将获取到的内容写入html对应位置
$('#main_left .content').append(html);
// 遍历issue_content，并调用显示处理函数
// 默认显示文章的前200字,点击"显示全部"按钮则当前文章显示全部
$.each($('.issue_content'), function (index,value){
var _this = this;
show_issue_content(index,value,_this);
});
// 遍历issue_bottom，并调用处理函数
$.each($('.issue_bottom'), function (index, value) {
var _this = this;
show_issue_bottom(index,value,_this);
});
// 获取每篇文章标题、作者、发表日期、详细内容、评论数、收起按钮、分割线、评论容器
function create_issue(opt) {
return '';
}
// issue_content显示处理函数，默认显示文章的前200字,点击"显示全部"按钮则当前文章显示全部
// 并隐藏"显示全部"按钮，显示"收起"按钮
function show_issue_content(index, value,_this) {
arr[index] = $(value).html();
summary[index] = arr[index].substr(0, 200);
// 如果第200位是小于号，或者倒数两位是小于号和斜线则替换为空
if (summary[index].substring(199,200) == '<') {
summary[index] = replacePos(summary[index], 200, '');
}
if (summary[index].substring(198,200) == ' 200) {
summary[index] += '...显示全部';
$(value).html(summary[index]);
}
// 隐藏收起按钮
$('.issue_bottom .up').hide();
// 显示全部按钮点击则当前文章显示全部
$(_this).on('click', '.down', function () {
$('.issue_content').eq(index).html(arr[index]);
$(this).hide();
$('.issue_bottom .up').eq(index).show();
});
}
// strObj的pos位置内容替换成replaceText
function replacePos(strObj, pos, replaceText) {
return strObj.substr(0, pos-1) + replaceText + strObj.substring(pos, strObj.length);
}
// issue_bottom显示处理函数，点击"收起"按钮则恢复默认显示200字，并隐藏"收起"按钮，显示"显示全部"按钮
// 点击"评论"按钮则ajax请求评论信息，并显示
function show_issue_bottom(index, value,_this){
// 点击"收起"按钮则恢复默认显示200字，并隐藏"收起"按钮，显示"显示全部"按钮
$(_this).on('click', '.up', function () {
$('.issue_content').eq(index).html(summary[index]);
$(this).hide();
$('.issue_content .down').eq(index).show();
});
// 点击"评论"按钮检查user cookie判断是否已登录
// 已登录则ajax请求评论数据
// 未登录则提示error对话框，1秒后显示登陆对话框
$(_this).on('click', '.comment', function () {
// 保存点击的当前issue中评论element，在请求评论数据时向后台传递它的id来获取对应的评论数据
var comment_this = this;
if ($.cookie('user')) {
// 已登录则先判断是否有评论数据，如果有则ajax请求获取评论数据
if (!$('.comment_list').eq(index).has('form').length) {
$.ajax({
url : 'php/show_comment.php',
type : 'POST',
//向后台传递当前点击的评论元素的id来获取对应的评论数据，没有page值
data : {
titleid : $(comment_this).attr('data-id'),
},
// 发送ajax请求之前显示"正在加载评论"
beforeSend : function (jqXHR, settings) {
$('.comment_list').eq(index).append('- 正在加载评论
');
},
success : function (response) {
// 请求成功后隐藏"正在加载评论"
$('.comment_list').eq(index).find('.comment_load').hide();
var json_comment = $.parseJSON(response);
// 调用请求成功处理函数，第一次请求没有向后台传递page值，则默认返回0到2条数据
ajax_comment_success(json_comment);
},
});
}
if ($('.comment_list').eq(index).is(':hidden')) {
$('.comment_list').eq(index).show();
} else {
$('.comment_list').eq(index).hide();
}
} else {
// 未登录则提示error对话框，1秒后显示登陆对话框
$('#error').dialog('open');
setTimeout(function () {
$('#error').dialog('close');
$('#login').dialog('open');
}, 1000);
}
function ajax_comment_success(json_comment){
var count = 0;
// 遍历返回的评论数据，获取信息并写入comment_list
$.each(json_comment, function (index2, value) {
// 并把返回数据数量传递给count
count = value.count;
$('.comment_list').eq(index).append(
'- '
+ value.user + '
- ' + value.comment
+ '
- ' + value.date + '
'
);
});
// comment_list后添加"加载更多评论"按钮
$('.comment_list').eq(index).append('- 加载更多评论
');
// 如果第一次返回评论数少于2条，即表示评论已全部显示
// 则关闭"加载更多评论"按钮的点击事件，并隐藏
var page = 2;
if (count < page ) {
$('.comment_list').eq(index).find('.load_more').off('click');
$('.comment_list').eq(index).find('.load_more').hide();
}
// "加载更多评论"按钮的点击事件
$('.comment_list').eq(index).find('.load_more').button().on('click', function () {
// 点击后禁用
$('.comment_list').eq(index).find('.load_more').button('disable');
// ajax请求评论数据
$.ajax({
url : 'php/show_comment.php',
type : 'POST',
// 传递后台的数据，当前评论id和page
data : {
titleid : $(comment_this).attr('data-id'),
page : page,
},
// 请求前显示more_load.gif
beforeSend : function (jqXHR, settings) {
$('.comment_list').eq(index).find('.load_more').html('
');
},
// 请求成功，将返回数据添加到comment_content元素的最后一个子元素后面，即每次获得的数据都添加在最后
// 显示"加载更多评论"按钮，并启用
// page自加1，并与总评论数count比较，
// 如果page++后大于count，则说明评论加载完成，则禁用"加载更多评论"按钮并隐藏
success : function (response) {
var json_comment_more = $.parseJSON(response);
$.each(json_comment_more, function (index3, value) {
$('.comment_list').eq(index).find('.comment_content').last().after('- ' + value.user + '
- ' + value.comment + '
- ' + value.date + '
');
});
$('.comment_list').eq(index).find('.load_more').button('enable');
$('.comment_list').eq(index).find('.load_more').html('加载更多评论');
page++;
if (page > count) {
$('.comment_list').eq(index).find('.load_more').off('click');
$('.comment_list').eq(index).find('.load_more').hide();
}
}
});
});
// 在评论后面添加"发表评论"表单，并将登录用户名和当前评论的id保存在表单中
$('.comment_list').eq(index).append('');
// "发表评论"表单的发表按钮点击事件
$('.comment_list').eq(index).find('input[type=button]').button().on("click",function () {
var _this = this;
// 点击"发表"按钮，ajax提交当前表单
$('.comment_list').eq(index).find('form').ajaxSubmit({
url : 'php/add_comment.php',
type : 'POST',
// 提交前，打开loading对话框，并禁用发表按钮
beforeSubmit : function (formData, jqForm, options) {
$('#loading').dialog('open');
$(_this).button('disable');
},
// ajax请求成功后，恢复发表按钮，并显示加载成功loading对话框
success : function (responseText, statusText) {
if (responseText) {
$(_this).button('enable');
$('#loading').css('background', 'url(img/success.gif) no-repeat 20px center').html('数据新增成功...');
// 1秒钟后恢复loading的数据交互中对话框并关闭，重置发表评论表单并关闭
// 并将刚发表的评论显示在评论的第一个位置
setTimeout(function () {
var date = new Date();
$('#loading').dialog('close');
$('.comment_list').eq(index).prepend('- ' + $.cookie('user')+ '
- ' + $('.comment_list').eq(index).find('textarea').val() + '
- ' +date.getFullYear() + '-' + (date.getMonth()+ 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' +date.getMinutes() + ':' + date.getSeconds() + '
');
$('.comment_list').eq(index).find('form').resetForm();
$('#loading').css('background', 'url(img/loading.gif) no-repeat 20px center').html('数据交互中...');
}, 1000);
}
},
});
});
}
});
}
}
php部分
显示评论
$_count) {
$_page = $_count;
}
}
$_limit = ($_page - 1) * $_pagesize;
$query = mysql_query("SELECT ({$_count}) AS count,titleid,comment,user,date FROM comment
WHERE titleid='{$_POST['titleid']}' ORDER BY date DESC LIMIT {$_limit},{$_pagesize}") or die('SQL 错误！');
$json = '';
while (!!$row = mysql_fetch_array($query, MYSQL_ASSOC)) {
foreach ( $row as $key => $value ) {
$row[$key] = urlencode(str_replace("\n","", $value));
}
$json .= urldecode(json_encode($row)).',';
}
echo '['.substr($json, 0, strlen($json) - 1).']';
mysql_close();
?>
添加评论
代码在Github：个人博客