我正在对一个将数组数据返回到我的视图的控制器进行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?
答案 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);
});
})
我希望它会有用。