个人博客—获取博文列表

个人博客—获取博文列表

  • 页面加载时默认获取5条博文;
个人博客—获取博文列表_第1张图片
默认显示5条博文
  • 每个博文默认显示前两百字;
个人博客—获取博文列表_第2张图片
每个博文默认显示200字
  • 点击显示全部则显示当前博文的全部内容;
个人博客—获取博文列表_第3张图片
点击显示全部按钮
  • 点击收起则恢复显示200字;
  • 点击评论,则显示评论信息列表,和发表评论表单,再次点击评论按钮则隐藏;
个人博客—获取博文列表_第4张图片
点击评论按钮加载中
个人博客—获取博文列表_第5张图片
点击评论按钮加载完成
  • 如果评论数小于等于2条,则显示全部评论,不显示加载更多评论按钮;
个人博客—获取博文列表_第6张图片
评论数不大于2条
  • 如果评论数大于2条,则显示2条评论,并显示加载更多评论按钮;
个人博客—获取博文列表_第7张图片
评论数大于2条
  • 点击加载更多评论按钮,则再显示2条,直到最后一次小于等于2条时,隐藏加载更多按钮;
个人博客—获取博文列表_第8张图片
点击加载更多评论按钮
个人博客—获取博文列表_第9张图片
所有评论加载完成
  • 输入评论内容,点击发表评论按钮,则将评论信息和用户名及当前时间写入数据库,并在评论列表最上方显示最新评论;
个人博客—获取博文列表_第10张图片
点击发表评论按钮
个人博客—获取博文列表_第11张图片
评论发表成功
个人博客—获取博文列表_第12张图片
最新评论显示

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 '
' + opt.title + '' + opt.user + ' 发表于 ' + opt.date + '
' + opt.content + '
' + opt.count + '条评论 收起

'; } // 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:个人博客

你可能感兴趣的