javascript - 如何在 HTML 中显示来自 Ajax 的数组数据(在 Laravel 4.1 中)

Question

我正在对 Controller 进行 Ajax 调用，该 Controller 将数组数据返回到我的 View 。我想获取这个数组数据并在单击时以 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);
          } 
        });

Controller 功能:

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;

    }

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

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

进一步单击显示每个对象确实是数组数据的正确“行”。我如何获取这些数据并将其显示在 HTML 中？

Answer 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);
    });
}

但是!!!

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

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);
    });
})

希望它有用。