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

时间:2014-05-29 05:44:25

标签: javascript php jquery ajax laravel

我正在对一个将数组数据返回到我的视图的控制器进行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;

    }

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

成功后的console.log(数据)打印出来[对象,对象,对象,对象,对象,对象,对象]

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

1 个答案:

答案 0 :(得分:2)

假设您要自动将返回的数据插入以下容器中:

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

BUT !!!

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

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

我希望它会有用。