从 DB 查询返回一个数组 JSON,然后将内容放入带有 jQuery 的列表元素中

Returning an array from DB query as JSON and then putting the contents into list elements with jQuery

我有一个正在开发的评论系统,它的目标是像 instagrams 系统。

目前,我在 PHP foreach 中显示最后 3 个项目,还有一个 'show all button'。

我的目标是点击按钮并调用一个函数,然后 returns 将所有评论作为一个数组。然后我需要 .prepend() 这个数组作为列表元素。

通常调用 AJAX 获取数据就可以了。但是我以前只调过一行的值。

我正在使用 Laravel,所以我的获取函数类似于:

public function fetch() {
  DB:: // SELECT ALL COMMENTS
  $commentsArray = array();
  foreach ($comments as $comment) {
     $commentsArray = (array('commentusername', 'comment'));
  }

  return Response::json(array(
    'success' => true,
    'comments' => $commentsArray,
  200)
  );
}

然后在我的 jQuery 电话中:

if (data.success) {
  $(".comments_"+id).prepend("<li><b>USERNAME:</b> Comment</li>");
}

这个前缀会如我所愿,但我需要了解我应该如何正确创建数组,然后我如何循环遍历它们并在 jQuery.[=4= 中创建列表元素]

请注意,PHP 函数是在此处编写的,未经测试等。

谢谢。

首先,您需要将数组添加到数组中。正如你所做的那样,你总是只是覆盖你的变量:

$commentsArray[] = (array('commentusername', 'comment'));

在你的变量名后添加一个[]

然后在 jQuery:

$.each(data, function(idx, obj) {
    $(".comments_"+id).prepend("<li><b>USERNAME:" + obj.commentusername + ", </b> Comment</li>" + obj.comment);
});

注意:不要忘记在循环中检查和更改 id

我无法理解你的问题,但我会告诉你如何从脚本中获得 json 响应然后解析它,

// script.php

<?php

   $data = array(

        array('User' : 'Tiger', 'Comment' : 'Any comment,, '),
        array('User' : 'John', 'Comment' : 'Tiger is nice guy !!') 

   );  // In reality data will fetch from Db 

   header('Content-Type: application/json');  // must be set, and no space between ...pe and ':'
   echo json_encode($data);   

?>

client_side.js

 $.get('script.php', function(data) {

         for(i = 0; i < data.length; i++){

                $(".comments_"+id).prepend("<li><b>USERNAME :</b> " + data[i].User + " <b> Comment :</b> " + data[i].Comment  + "</li>");  // You should use templete here

         } // __prepending comments

 }, 'json');

谢谢:)

首先,使用array_map得到一个你想要的格式的数组:

public function fetch() {
    DB:: // SELECT ALL COMMENTS
    $commentsArray = array_map(function($comment){
        return array(
                'username' => $comment->commentusername,
                'comment' => $comment->comment
        );
    }, $comments);

    return Response::json(array(
        'success' => true,
        'comments' => $commentsArray
    ));
}

(我将 commentusername 更改为输出数组的用户名。另外,您的响应中不需要 200

现在您的回复如下所示:

{
    success: true,
    comments: [
        {username: 'foo', comment: 'comment of foo'},
        {username: 'foo', comment: 'comment of foo'}
    ]
}

然后在您的 javascript 代码中执行以下操作:

if (data.success) {
    for(var i=0; i<data.comments.length; i++){
        var comment = data.comments[i];
        $(".comments_"+id).prepend("<li><b>"+comment.username+":</b> "+comment.comment+"</li>");
    }
}

另请注意,如果您对错误使用 HTTP 状态代码,则可以删除 success: true 并假设如果响应为 200(ajax 成功回调)则请求已成功发出。