如何在 HTML 中显示来自 Ajax 的数组数据（在 Laravel 4.1 中）答案

【问题标题】：How to display array data from Ajax in HTML (in Laravel 4.1)如何在 HTML 中显示来自 Ajax 的数组数据（在 Laravel 4.1 中）
【发布时间】：2014-05-29 05:44:25
【问题描述】：

我正在对控制器进行 Ajax 调用，该控制器将数组数据返回到我的视图。我想获取这个数组数据并在点击时以 HTML 格式显示。我不知道该怎么做。这是我目前所拥有的：

Ajax 调用：

request = $.ajax({ 
          url: "/fans/follow", 
          type: "post", 
          dataType: 'json',
          success:function(data){
            console.log(data);

          }, 
          data: {'id': id} ,beforeSend: function(data){
            console.log(data);
          } 
        });

控制器功能：

public function follow() {

            $user_id = Auth::user()->get()->id;
            $fan_id = Input::get('id');

            $follow_array = Fanfollow::follows(Auth::user()->get()->id,0,7);

            return Response::json( $follow_array );
        }

我的 Fanfollow 模型中的跟随功能：

public static function follows($user_id, $start = 0, $number_of_posts = 7) {
        $follows = DB::table('fanfollows')
                 ->join('fanartists', 'fanfollows.fan_id', '=', 'fanartists.fan_id')
                 ->join('fans', 'fanfollows.fan_id', '=', 'fans.id')
                 ->join('artists', 'fanartists.artist_id', '=', 'artists.id')
                 ->orderBy('fanartists.created_at', 'DESC')
                 ->where('fanfollows.user_id', '=', $user_id)
                 ->take($number_of_posts)
                 ->offset($start)
                 ->select(DB::raw('DATE_FORMAT(fanartists.created_at, "%M %d %Y") as created_at, fans.id, fans.first_name, fans.last_name, fans.gender'))
                 ->get();

        return $follows;

    }

基本上，我想将模型中的以下函数返回的数据带到视图中并打印出来。

成功后的console.log(data)是打印出[Object, Object, Object, Object, Object, Object, Object]

点击进一步显示每个对象确实是数组数据的正确“行”。如何获取这些数据并以 HTML 格式显示？

【问题讨论】：

标签： javascript php jquery ajax laravel

【解决方案1】：

假设您想将返回的数据自动插入到以下容器中：

<table id="my-containing-data">
    <tr>
        <th>Id</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Gender</th>
        <th>Created At</th>
    </tr>
</table>

在您的成功事件中执行以下操作：

success: function(data){
    $.each(data, function(index, obj){
        var tr = $("<tr></tr>");

        tr.append("<td>"+ obj.id +"</td>");
        tr.append("<td>"+ obj.first_name +"</td>");
        tr.append("<td>"+ obj.last_name +"</td>");
        tr.append("<td>"+ obj.gender +"</td>");
        tr.append("<td>"+ obj.created_at +"</td>");

        $("#my-containing-data").append(tr);
    });
}

但是！！！

如果您只想在点击时注入数据，则必须将返回的数据分配给一个变量。

ajax 调用之前的某处：

var myReturnedData;

成功事件如下所示：

success: function(data){
    myReturnedData = data;
}

还有点击事件：

$("#my-handler").on("click", function(e){
    e.preventDefault();

    $.each(myReturnedData, function(index, obj){
        var tr = $("<tr></tr>");

        tr.append("<td>"+ obj.id +"</td>");
        tr.append("<td>"+ obj.first_name +"</td>");
        tr.append("<td>"+ obj.last_name +"</td>");
        tr.append("<td>"+ obj.gender +"</td>");
        tr.append("<td>"+ obj.created_at +"</td>");

        $("#my-containing-data").append(tr);
    });
})

希望对你有用。

【讨论】：