個(gè)人博客—獲取博文列表
- 頁面加載時(shí)默認(rèn)獲取5條博文征懈；
默認(rèn)顯示5條博文
- 每個(gè)博文默認(rèn)顯示前兩百字鸣剪；
每個(gè)博文默認(rèn)顯示200字
- 點(diǎn)擊顯示全部則顯示當(dāng)前博文的全部內(nèi)容沟突；
點(diǎn)擊顯示全部按鈕
- 點(diǎn)擊收起則恢復(fù)顯示200字花颗；
- 點(diǎn)擊評論，則顯示評論信息列表事扭，和發(fā)表評論表單捎稚，再次點(diǎn)擊評論按鈕則隱藏乐横；
點(diǎn)擊評論按鈕加載中
點(diǎn)擊評論按鈕加載完成
- 如果評論數(shù)小于等于2條求橄，則顯示全部評論，不顯示加載更多評論按鈕葡公；
評論數(shù)不大于2條
- 如果評論數(shù)大于2條罐农，則顯示2條評論，并顯示加載更多評論按鈕催什；
評論數(shù)大于2條
- 點(diǎn)擊加載更多評論按鈕涵亏，則再顯示2條，直到最后一次小于等于2條時(shí)蒲凶，隱藏加載更多按鈕气筋；
點(diǎn)擊加載更多評論按鈕
所有評論加載完成
- 輸入評論內(nèi)容，點(diǎn)擊發(fā)表評論按鈕旋圆，則將評論信息和用戶名及當(dāng)前時(shí)間寫入數(shù)據(jù)庫宠默，并在評論列表最上方顯示最新評論；
點(diǎn)擊發(fā)表評論按鈕
評論發(fā)表成功
最新評論顯示
html部分
無
js部分
$.ajax({
url : 'php/show_issue.php',
type : 'POST',
success : function (response) {
var json = JSON.parse(response);
// 調(diào)用請求成功處理函數(shù)
ajax_issue_success(json);
}
});
// ajax請求顯示博文灵巧，請求成功處理函數(shù)
function ajax_issue_success(json){
var html = '',
arr = [],
summary = [];
// 遍歷返回的數(shù)據(jù)前10篇文章
for(var i=0; i<5; i++){
html += create_issue(json[i]); //調(diào)用create_issue函數(shù)
}
// 將獲取到的內(nèi)容寫入html對應(yīng)位置
$('#main_left .content').append(html);
// 遍歷issue_content搀矫，并調(diào)用顯示處理函數(shù)
// 默認(rèn)顯示文章的前200字,點(diǎn)擊"顯示全部"按鈕則當(dāng)前文章顯示全部
$.each($('.issue_content'), function (index,value){
var _this = this;
show_issue_content(index,value,_this);
});
// 遍歷issue_bottom，并調(diào)用處理函數(shù)
$.each($('.issue_bottom'), function (index, value) {
var _this = this;
show_issue_bottom(index,value,_this);
});
// 獲取每篇文章標(biāo)題刻肄、作者瓤球、發(fā)表日期、詳細(xì)內(nèi)容敏弃、評論數(shù)卦羡、收起按鈕、分割線麦到、評論容器
function create_issue(opt) {
return '<div class="content_wrap"><a class="issue_title">' + opt.title + '</a><span class="author">'
+ opt.user + ' 發(fā)表于 ' + opt.date + '</span><div class="issue_content">' + opt.content
+ '</div><div class="issue_bottom"><span class="comment" data-id="'
+ opt.id + '">' + opt.count
+ '條評論</span> <span class="up">收起</span></div><hr noshade="noshade" size="1" /><div class="comment_list"></div></div>';
}
// issue_content顯示處理函數(shù)绿饵，默認(rèn)顯示文章的前200字,點(diǎn)擊"顯示全部"按鈕則當(dāng)前文章顯示全部
// 并隱藏"顯示全部"按鈕，顯示"收起"按鈕
function show_issue_content(index, value,_this) {
arr[index] = $(value).html();
summary[index] = arr[index].substr(0, 200);
// 如果第200位是小于號隅要，或者倒數(shù)兩位是小于號和斜線則替換為空
if (summary[index].substring(199,200) == '<') {
summary[index] = replacePos(summary[index], 200, '');
}
if (summary[index].substring(198,200) == '</') {
summary[index] = replacePos(summary[index], 200, '');
summary[index] = replacePos(summary[index], 199, '');
}
// 在文章200字后面加上顯示全部按鈕
if (arr[index].length > 200) {
summary[index] += '...<span class="down">顯示全部</span>';
$(value).html(summary[index]);
}
// 隱藏收起按鈕
$('.issue_bottom .up').hide();
// 顯示全部按鈕點(diǎn)擊則當(dāng)前文章顯示全部
$(_this).on('click', '.down', function () {
$('.issue_content').eq(index).html(arr[index]);
$(this).hide();
$('.issue_bottom .up').eq(index).show();
});
}
// strObj的pos位置內(nèi)容替換成replaceText
function replacePos(strObj, pos, replaceText) {
return strObj.substr(0, pos-1) + replaceText + strObj.substring(pos, strObj.length);
}
// issue_bottom顯示處理函數(shù)蝴罪，點(diǎn)擊"收起"按鈕則恢復(fù)默認(rèn)顯示200字，并隱藏"收起"按鈕步清，顯示"顯示全部"按鈕
// 點(diǎn)擊"評論"按鈕則ajax請求評論信息要门，并顯示
function show_issue_bottom(index, value,_this){
// 點(diǎn)擊"收起"按鈕則恢復(fù)默認(rèn)顯示200字虏肾，并隱藏"收起"按鈕，顯示"顯示全部"按鈕
$(_this).on('click', '.up', function () {
$('.issue_content').eq(index).html(summary[index]);
$(this).hide();
$('.issue_content .down').eq(index).show();
});
// 點(diǎn)擊"評論"按鈕檢查user cookie判斷是否已登錄
// 已登錄則ajax請求評論數(shù)據(jù)
// 未登錄則提示error對話框欢搜，1秒后顯示登陸對話框
$(_this).on('click', '.comment', function () {
// 保存點(diǎn)擊的當(dāng)前issue中評論element封豪，在請求評論數(shù)據(jù)時(shí)向后臺傳遞它的id來獲取對應(yīng)的評論數(shù)據(jù)
var comment_this = this;
if ($.cookie('user')) {
// 已登錄則先判斷是否有評論數(shù)據(jù)，如果有則ajax請求獲取評論數(shù)據(jù)
if (!$('.comment_list').eq(index).has('form').length) {
$.ajax({
url : 'php/show_comment.php',
type : 'POST',
//向后臺傳遞當(dāng)前點(diǎn)擊的評論元素的id來獲取對應(yīng)的評論數(shù)據(jù)炒瘟，沒有page值
data : {
titleid : $(comment_this).attr('data-id'),
},
// 發(fā)送ajax請求之前顯示"正在加載評論"
beforeSend : function (jqXHR, settings) {
$('.comment_list').eq(index).append('<dl class="comment_load"><dd>正在加載評論</dd></dl>');
},
success : function (response) {
// 請求成功后隱藏"正在加載評論"
$('.comment_list').eq(index).find('.comment_load').hide();
var json_comment = $.parseJSON(response);
// 調(diào)用請求成功處理函數(shù)吹埠，第一次請求沒有向后臺傳遞page值，則默認(rèn)返回0到2條數(shù)據(jù)
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;
// 遍歷返回的評論數(shù)據(jù)缘琅，獲取信息并寫入comment_list
$.each(json_comment, function (index2, value) {
// 并把返回?cái)?shù)據(jù)數(shù)量傳遞給count
count = value.count;
$('.comment_list').eq(index).append(
'<dl class="comment_content"><dt>'
+ value.user + '</dt><dd>' + value.comment
+ '</dd><dd class="date">' + value.date + '</dd></dl>'
);
});
// comment_list后添加"加載更多評論"按鈕
$('.comment_list').eq(index).append('<dl><dd><span class="load_more">加載更多評論</span></dd></dl>');
// 如果第一次返回評論數(shù)少于2條，即表示評論已全部顯示
// 則關(guān)閉"加載更多評論"按鈕的點(diǎn)擊事件廓推，并隱藏
var page = 2;
if (count < page ) {
$('.comment_list').eq(index).find('.load_more').off('click');
$('.comment_list').eq(index).find('.load_more').hide();
}
// "加載更多評論"按鈕的點(diǎn)擊事件
$('.comment_list').eq(index).find('.load_more').button().on('click', function () {
// 點(diǎn)擊后禁用
$('.comment_list').eq(index).find('.load_more').button('disable');
// ajax請求評論數(shù)據(jù)
$.ajax({
url : 'php/show_comment.php',
type : 'POST',
// 傳遞后臺的數(shù)據(jù)刷袍，當(dāng)前評論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('<img src="img/more_load.gif" />');
},
// 請求成功，將返回?cái)?shù)據(jù)添加到comment_content元素的最后一個(gè)子元素后面樊展，即每次獲得的數(shù)據(jù)都添加在最后
// 顯示"加載更多評論"按鈕呻纹，并啟用
// page自加1，并與總評論數(shù)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('<dl class="comment_content"><dt>' + value.user + '</dt><dd>' + value.comment + '</dd><dd class="date">' + value.date + '</dd></dl>');
});
$('.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();
}
}
});
});
// 在評論后面添加"發(fā)表評論"表單涝婉，并將登錄用戶名和當(dāng)前評論的id保存在表單中
$('.comment_list').eq(index).append('<form><dl class="comment_add"><dt><textarea name="comment"></textarea></dt><dd><input type="hidden" name="titleid" value="'
+ $(comment_this).attr('data-id') + '" /><input type="hidden" name="user" value="'
+ $.cookie('user') + '" /><input type="button" value="發(fā)表" /></dd></dl></form>');
// "發(fā)表評論"表單的發(fā)表按鈕點(diǎn)擊事件
$('.comment_list').eq(index).find('input[type=button]').button().on("click",function () {
var _this = this;
// 點(diǎn)擊"發(fā)表"按鈕哥力，ajax提交當(dāng)前表單
$('.comment_list').eq(index).find('form').ajaxSubmit({
url : 'php/add_comment.php',
type : 'POST',
// 提交前，打開loading對話框嘁圈，并禁用發(fā)表按鈕
beforeSubmit : function (formData, jqForm, options) {
$('#loading').dialog('open');
$(_this).button('disable');
},
// ajax請求成功后省骂，恢復(fù)發(fā)表按鈕，并顯示加載成功loading對話框
success : function (responseText, statusText) {
if (responseText) {
$(_this).button('enable');
$('#loading').css('background', 'url(img/success.gif) no-repeat 20px center').html('數(shù)據(jù)新增成功...');
// 1秒鐘后恢復(fù)loading的數(shù)據(jù)交互中對話框并關(guān)閉最住，重置發(fā)表評論表單并關(guān)閉
// 并將剛發(fā)表的評論顯示在評論的第一個(gè)位置
setTimeout(function () {
var date = new Date();
$('#loading').dialog('close');
$('.comment_list').eq(index).prepend('<dl class="comment_content"><dt>' + $.cookie('user')+ '</dt><dd>' + $('.comment_list').eq(index).find('textarea').val() + '</dd><dd>' +date.getFullYear() + '-' + (date.getMonth()+ 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' +date.getMinutes() + ':' + date.getSeconds() + '</dd></dl>');
$('.comment_list').eq(index).find('form').resetForm();
$('#loading').css('background', 'url(img/loading.gif) no-repeat 20px center').html('數(shù)據(jù)交互中...');
}, 1000);
}
},
});
});
}
});
}
}
php部分
顯示評論
<?php
sleep(1);
require 'config.php';
// 從數(shù)據(jù)庫獲取對應(yīng)id的所有評論數(shù)據(jù)
$_sql = mysql_query("SELECT COUNT(*) AS count FROM comment WHERE titleid='{$_POST['titleid']}'");
$_result = mysql_fetch_array($_sql, MYSQL_ASSOC);
// 初始化返回?cái)?shù)據(jù)條數(shù)的上限值_pagesize=2
$_pagesize = 2;
// 計(jì)算所有評論數(shù)量按每次返回最多兩條可以返回的次數(shù)
$_count = ceil($_result['count'] / $_pagesize);
$_page = 1;
// 前端第一次請求數(shù)據(jù)沒有傳遞page钞澳，則_page賦值為1，則_limit=0涨缚，則返回0到_pagesize=2條數(shù)據(jù)
// 前端判斷評論總數(shù)大于2則可以繼續(xù)請求
// 第二次請求傳遞page=2
// 將前端傳遞來的page值傳遞給_page轧粟，并與可以返回次數(shù)_count比較
// 如果可以返回次數(shù)_count少于等于2次，則將_count賦值給_page脓魏，即第二次再返回0-2條評論數(shù)據(jù)
// 第三次請求傳遞page=3
// 如果可以返回的次數(shù)_count不少于2次兰吟，則_page=2，
// 計(jì)算$_limit = ($_page - 1) * $_pagesize得到每次返回?cái)?shù)據(jù)的上下限皆為2茂翔，即返回2條數(shù)據(jù)
if (!isset($_POST['page'])) {
$_page = 1;
} else {
$_page = $_POST['page'];
if ($_page > $_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 錯(cuò)誤混蔼！');
$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();
?>
添加評論
<?php
sleep(1);
require 'config.php';
$query = "INSERT INTO comment (titleid, comment, user, date)
VALUES ('{$_POST['titleid']}', '{$_POST['comment']}', '{$_POST['user']}', NOW())";
mysql_query($query) or die('新增失敗珊燎！'.mysql_error());
echo mysql_affected_rows();
mysql_close();
?>
代碼在Github：個(gè)人博客
