个人网站留言页面（前端jQuery编写、后台php读写(2)

fn.resetList = function(){ this.loading.css('display', 'block') this.noCmt.css('display', 'none'); this.cmtList.html(''); }; fn.getList = function(){ var self = this; this.resetList(); $.ajax({ url: self.getCmtUrl, type: 'get', dataType: 'json', data: { id: self.belong }, success: function(data){ if(!data){ alert('获取评论列表失败'); return !1; }; //整理评论列表 self.initList(data); self.loading.css('display', 'none'); //显示评论列表 if(self.lists.length == 0){ //暂时没有评论 self.noCmt.css('display', 'block'); }else{ //设置分页器 var total = Math.ceil(self.lists.length / self.offset); self.pager = new Pager({ index: 1, total: total, parent: self.pagerBox[0], onchange: self.doChangePage.bind(self), label:{ prev: '<', next: '>' } }); } }, error: function(){ alert('获取评论列表失败'); } }); };

get形式，然后传送id过去，得到了的数据希望是列表数组。

php的内容不讲，下面贴出sql语句：

$id = $_GET['id']; $query = "select * from comments where belong=$id order by time"; ... $str = '['; foreach ($result as $key => $value) { $id = $value['id']; $username = $value['username']; $time = $value['time']; $content = $value['content']; $parent = $value['parent']; $str .= <<<end { "id" : "{$id}", "parent" : "{$parent}", "username" : "{$username.'", "time" : "{$time}", "content" : "{$content}", "response" : [] } end; } $str = substr($str, 0, -1); $str .= ']'; echo $str;

获得的是json字符串，jQuery的ajax可以将它转为json数据，获得的数据如下：

如果加载成功，那么我们得到的是一堆的数据，我们现在是在success回调函数里，数据需要整理，才能显示，因为现在所有的评论回复都属于同一层。

initList 函数

fn.initList = function (data) { this.lists = []; //保存评论列表 this.keys = {}; //保存评论id和index对应表 var index = 0; //遍历处理 for(var i = 0, len = data.length; i < len; i++){ var t = data[i], id = t['id']; if(t['parent'] == 0){ this.keys[id] = index++; this.lists.push(t); }else{ var parentId = t['parent'], parentIndex = this.keys[parentId]; this.lists[parentIndex]['response'].push(t); } }; };

我的思路就是：this.lists放的都是评论（parent为0的留言），通过遍历获取的数据，如果parent为0，就push进this.lists；否则parent不为0表示这是个回复，就找到对应的评论，把该回复push进那条评论的response中。

但是还有个问题，就是因为id是不断增长的，可能中间有些评论被删除了，所以id和index并不一定匹配，所以借助this.keys保存id和index的对应关系。

遍历一遍就能将所有的数据整理好，并且全部存在了this.lists中，接下来剩下的事情就是将数据变成html放进页面就好了。

//显示评论列表 if(self.lists.length == 0){ //暂时没有评论 self.noCmt.css('display', 'block'); }else{ //设置分页器 var total = Math.ceil(self.lists.length / self.offset); self.pager = new Pager({ index: 1, total: total, parent: self.pagerBox[0], onchange: self.doChangePage.bind(self), label:{ prev: '<', next: '>' } }); }

这是刚才ajax，success回调函数的一部分，这是在整理完数据后，如果数据为空，那么就显示“暂时没有评论”。

否则，就设置分页器，分页器我直接用了之前封装的，如果有兴趣可以看看我之前的文章：

面向对象：分页器封装

简单说就是会执行一遍onchange函数，默认页数为1，保存在参数obj.index中

fn.doChangePage = function (obj) { this.showList(obj.index); };

showList函数

fn.showList = (function(){ /* 生成一条评论字符串 */ function oneLi(_obj){ var str1 = ''; //处理回复 for(var i = 0, len = _obj.response.length; i < len; i++){ var t = _obj.response[i]; t.content = t.content.replace(/\&lt\;/g, '<'); t.content = t.content.replace(/\&gt\;/g, '>'); str1 += '<li><table><tbody><tr><td>' + '<span>' + t.username + '：</span></td><td>' + '<span>' + t.content + '</span></td></tr></tbody></table>' + '</li>' } //处理评论 var headImg = ''; if(_obj.username == "kang"){ headImg = 'kang_head.jpg'; }else{ var index = Math.floor(Math.random() * 6) + 1; headImg = 'head' + index + '.jpg' } _obj.content = _obj.content.replace(/\&lt\;/g, '<'); _obj.content = _obj.content.replace(/\&gt\;/g, '>'); var str2 = '<li>' + '<div>' + '<img src="./img/head/' + headImg + '"/>' + '</div>' + '<div>' + '<div>' + '<span>' + _obj.username + '</span>' + '<span>' + _obj.time + '</span>' + '</div>' + '<span>' + _obj.content + '</span>' + '<ul>' + str1 + '</ul>' + '</div>' + '<div>' + '<a href="javascript:void(0);" data-id="' + _obj.id + '">[回复]</a>' + '</div>' + '</li>'; return str2; }; return function (page) { var len = this.lists.length, end = len - (page - 1) * this.offset, start = end - this.offset < 0 ? 0 : end - this.offset, current = this.lists.slice(start, end); var cmtList = ''; for(var i = current.length - 1; i >= 0; i--){ var t = current[i], index = this.keys[t['id']]; current[i]['index'] = index; cmtList += oneLi(t); } this.cmtList.html(cmtList); }; })();

这个函数的参数为page，就是页数，我们根据页数，截取this.lists的数据，然后遍历生成html。

html模板我是用字符串连接起来的，看个人喜好。

生成后就 this.cmtList.html(cmtList);这样就显示列表了，效果图看最开始。

现在需要的功能还有评论回复，而init函数中也只剩下最后一个initEvent

initEvent 函数