我目前正在开发一个带有评论区域的博客类型页面，这是一次个人学习冒险，我希望通过详细解释来巩固学习。我目前使用CodeIgniter以PHP的MVC模式构建所有内容，我的JavaScript代码也以类似的方式格式化。
编辑：我已经从PHP的build_array（）函数中添加了数组的输出。我觉得这是我的问题的根本原因，如果我可以修改数组，不给每个评论提供整个博客数据，它可以让我实现我想要的。
我很感谢所有的评论，我可能不知道你提出的所有问题，所以请耐心等待我，我很慢。 （：
我无法弄清楚如何正确显示数据，目前输出：
Blog Post Two
Blog Post Two Comment
Blog Post Two
Blog Post Two Comment
它忽略了第一篇博文，我不需要发布重复文章并发布每篇博文。
api / get_blog（）的代码：
$query = $this->db->query(
"SELECT blog.blog_id, blog.dateposted, blog.content, blog.title, blog.published,
user.login, user.img,
bc.username, bc.comment
FROM blog
JOIN user
ON blog.user_id = user.user_id
LEFT JOIN blog_comments bc
ON blog.blog_id = bc.blog_id
WHERE blog.published = 1
ORDER BY blog.blog_id DESC
");
$data = $query->result_array();
$result = $this->build_array($data);
构建数组函数：
foreach ($data as $row) {
if (!isset($outputArr[$row['blog_id']])) {
$outputArr[$row['blog_id']] = array();
}
$outputArr[$row['blog_id']][] = $row;
}
if(!empty($outputArr)) {
$result = $outputArr;
}
return $result;
返回以下数组：
<pre>Array
(
[37] => Array
(
[0] => Array
(
[blog_id] => 37
[dateposted] => 2014-04-13
[content] => <p>blog article two</p>
[title] => blog post two
[published] => 1
[login] => admin
[img] => public/img/blog-image.png
[username] => Skewled
[comment] => blog two comment
)
[1] => Array
(
[blog_id] => 37
[dateposted] => 2014-04-13
[content] => <p>blog article two</p>
[title] => blog post two
[published] => 1
[login] => admin
[img] => public/img/blog-image.png
[username] => Skewled
[comment] => blog two comment
)
)
[36] => Array
(
[0] => Array
(
[blog_id] => 36
[dateposted] => 2014-04-13
[content] => <p>blog article one</p>
[title] => blog post one
[published] => 1
[login] => admin
[img] => public/img/blog-image.png
[username] => Gaddam
[comment] => blog post one comment
)
[1] => Array
(
[blog_id] => 36
[dateposted] => 2014-04-13
[content] => <p>blog article one</p>
[title] => blog post one
[published] => 1
[login] => admin
[img] => public/img/blog-image.png
[username] => Gaddam
[comment] => blog post one comment
)
)
)
</pre>
从MySQL返回原始数组：
<pre>Array
(
[0] => Array
(
[blog_id] => 37
[dateposted] => 2014-04-13
[content] => <p>blog article two</p>
[title] => blog post two
[published] => 1
[login] => admin
[img] => public/img/blog-image.png
[username] => Skewled
[comment] => blog two comment
)
[1] => Array
(
[blog_id] => 37
[dateposted] => 2014-04-13
[content] => <p>blog article two</p>
[title] => blog post two
[published] => 1
[login] => admin
[img] => public/img/blog-image.png
[username] => Skewled
[comment] => blog two comment
)
[2] => Array
(
[blog_id] => 36
[dateposted] => 2014-04-13
[content] => <p>blog article one</p>
[title] => blog post one
[published] => 1
[login] => admin
[img] => public/img/blog-image.png
[username] => Gaddam
[comment] => blog post one comment
)
[3] => Array
(
[blog_id] => 36
[dateposted] => 2014-04-13
[content] => <p>blog article one</p>
[title] => blog post one
[published] => 1
[login] => admin
[img] => public/img/blog-image.png
[username] => Gaddam
[comment] => blog post one comment
)
)
</pre>
JSON字符串：
{"37":[{"blog_id":"37","dateposted":"2014-04-13","content":"<p>blog article two<\/p>","title":"blog post two","published":"1","login":"admin","img":"public\/img\/blog-image.png","username":"Tom","comment":"blog post 2 comment 1"},{"blog_id":"37","dateposted":"2014-04-13","content":"<p>blog article two<\/p>","title":"blog post two","published":"1","login":"admin","img":"public\/img\/blog-image.png","username":"Frank","comment":"blog post 2 comment 2"},{"blog_id":"37","dateposted":"2014-04-13","content":"<p>blog article two<\/p>","title":"blog post two","published":"1","login":"admin","img":"public\/img\/blog-image.png","username":"Joey","comment":"blog post 2 comment 3"}],"36":[{"blog_id":"36","dateposted":"2014-04-13","content":"<p>blog article one<\/p>","title":"blog post one","published":"1","login":"admin","img":"public\/img\/blog-image.png","username":"Ted","comment":"blog one comment number one"},{"blog_id":"36","dateposted":"2014-04-13","content":"<p>blog article one<\/p>","title":"blog post one","published":"1","login":"admin","img":"public\/img\/blog-image.png","username":"John","comment":"blog one comment two"},{"blog_id":"36","dateposted":"2014-04-13","content":"<p>blog article one<\/p>","title":"blog post one","published":"1","login":"admin","img":"public\/img\/blog-image.png","username":"Bill","comment":"blog one comment three"}]}
jQuery使用JSON字符串的函数：
var load_blog = function() {
$.getJSON('api/get_blog', function(data) {
$.each(data, function() { //Loop through each blog_id section
var output = '';
$.each(this, function(){ //Loop through each comment in this blog_id
output += Template.blog(this); //output the template
});
$("#list_blog").html(output);
});
});
};
博客视图模板：
this.blog = function(obj) {
var output = '';
output += '<div class="blog-post" style="margin: 5px;">';
output += '<h2 class="blog-post-title">';
output += obj.title + '</h2>';
output += '<p class="blog-post-meta">';
output += '<img src="' + obj.img +'">' + ' ' + obj.dateposted + ' by ' + obj[i].login[i] + '</p>';
output += '<p>' + obj.content + '</p>';
output += '</div>';
output += '<span class="options">';
output += '<a class ="blog_update_display" data-id="' + obj.blog_id + '" href="#"><i class="glyphicon glyphicon-pencil"></i></a> Leave Comment ';
output += '<div class="blog_comment_container" id="blog_comment_container_'+ obj[i].blog_id[i] +'"></div>';
output += '<div class="hide" id="blog_comment_' + obj.blog_id + '">' + obj[i].comment[i] + '</div>';
output += '</span>';
output += '<hr>';
output += '<span><a class="comment_toggle" data-id="'+ obj.blog_id +'" id="blog_title_' + obj.blog_id + '" href="#">View Comments</a></span> ';
output += '<div class="hide" id="blog_comment_block_' + obj.blog_id + '">';
output += '<hr>';
if (obj.username) {
output += '<h5 class="users">' + obj.username + ' commented:</h5>';
output += '<p>' + obj.comment + '</p>';
} else {
output += '<p>Be the first to comment!</p>';
}
output += '</div>';
output += '<hr>';
output += '</div>';
return output;
};
答案 0 :(得分：1)
在手机中输入所有内容并不酷lol试一试：
var load_blog = function() {
$.getJSON('api/get_blog', function(data) {
$.each(data, function() {
//Loop through each blog_id
$("#list_blog").append( Template.blog(this) );
});
});
};
this.blog = function(obj) {
var output = '';
output += '<div class="blog-post" style="margin: 5px;">';
output += '<h2 class="blog-post-title">';
output += obj[0].title + '</h2>';
output += '<p class="blog-post-meta">';
output += '<img src="' + obj[0].img +'">' + ' ' + obj[0].dateposted + ' by ' + obj[0].login + '</p>';
output += '<p>' + obj[0].content + '</p>';
output += '</div>';
// COMMENTING
output += '<span class="options">';
output += '<a class ="blog_update_display" data-id="' + obj[0].blog_id + '" href="#"><i class="glyphicon glyphicon-pencil"></i></a> Leave Comment ';
output += '<div class="blog_comment_container" id="blog_comment_container_'+ obj[0].blog_id +'"></div>';
output += '</span>';
// LOOP THROUGH COMMENTS
for(var i=0;i < obj.length;i++) {
output += '<div class="hide" id="blog_comment_' + obj[i].blog_id + '">' + obj[i].comment + '</div>';
output += '<hr>';
}
/* NO IDEA WHAT BELOW DOES
output += '<span><a class="comment_toggle" data-id="'+ obj[0].blog_id +'" id="blog_title_' + obj[0].blog_id + '" href="#">View Comments</a></span> ';
output += '<div class="hide" id="blog_comment_block_' + obj[0].blog_id + '">';
output += '<hr>';
if (obj[0].username) {
output += '<h5 class="users">' + obj[0].username + ' commented:</h5>';
output += '<p>' + obj[0].comment + '</p>';
} else {
output += '<p>Be the first to comment!</p>';
}
output += '</div>';
output += '<hr>';
output += '</div>';
*/
return output;
};
答案 1 :(得分：0)
您可以在模型中使用：
return json_encode($query->result());
在你的JS中，没有任何改变：
output += obj.title + '</h2>';
我不知道为什么你把obj [i] .title [i]放在你的模板函数中，因为你用一个条目而不是一个数组来调用这个函数。