[英]Laravel: Load more data from controller into view
我想问一下如何使用js或ajax显示更多数据,并调用Controller将结果显示到我的视图中。 到目前为止,我第一次显示8条带有limit(8)的帖子。 然后,我正在使用ajax调用控制器,每次带来8个以上的帖子。 我面临的问题是,每次我调用控制器或Ajax时,帖子都是相同的。 这是我的
PostsController
class PostsController extends Controller {
public function index(Request $request)
{
$posts = Post::orderBy('created_at', 'desc')->limit(4)->get();
$categories = Category::all();
if ($request->ajax()) {
$view = view('posts.load', compact('posts', 'categories'))->render();
return response()->json(['html'=>$view]);
}
return view('posts.display', compact('categories', 'posts'));
}
}
控制器通过网络,路由调用
Route::get('/posts', 'PostsController@index');
我在我的posts.display中调用foreach方法
<div class="col-md-8 col-md-offset-2" id="grid" style="padding-top: 40px;">
@foreach($posts as $post)
@if(strlen($post->body) < "701")
<div class="item">
<div class="col-col-12 tr-share share" style="padding: 1px 0 1px 0">
<span class="time">{{$post->created_at}}</span>
<a href="">
<span class="emoji">
{{Emoji::findByName("link")}}
</span>
</a>
<a href="">
<span class="emoji">
{{Emoji::findByName("mail")}}
</span>
</a>
<a href="">
<span class="emoji">
{{Emoji::findByName("pin")}}
</span>
</a>
</div>
<div class="tr-text">
<div class="col-md-12 td-text">
<p><a>{{$post->body}}</a></p>
</div>
</div>
<div class="tr-tag">
<div style="padding: 1px 0 1px 0; text-align: center">
{{Emoji::findByName("tag")}}Tag:
@foreach($categories as $category)
@if($category->id == $post->category_un)
<a href=""><span class="tag-un">#{{$category->name}}</span></a>,
@endif
@if($category->id == $post->category_fac)
<a href=""><span class="tag-fac">#{{$category->name}}</span></a>
@endif
@endforeach
</div>
</div>
<div class="tr-options">
<a href="" style="color: #dca20f"><span class="cool">(0) {{Emoji::findByName("cool")}}</span></a>
<hr class="vt-hr" />
<a href="" style="color: #AA8062"><span class="poo">(0) {{Emoji::findByName("poo")}}</span></a>
<hr class="vt-hr" />
<a href="" style="color: #000000"><span class="speech">(0) {{Emoji::findByName("speech")}}</span></a>
</div>
</div>
@elseif(strlen($post->body) > "700")
<div class="item">
<div class="col-col-12 tr-share share" style="padding: 1px 0 1px 0">
<span class="time">{{$post->created_at}}</span>
<a href="">
<span class="emoji">
{{Emoji::findByName("link")}}
</span>
</a>
<a href="">
<span class="emoji">
{{Emoji::findByName("mail")}}
</span>
</a>
<a href="">
<span class="emoji">
{{Emoji::findByName("pin")}}
</span>
</a>
</div>
<div class="tr-text">
<div class="col-md-12 td-text">
<p class="more"><a>{{$post->body}}</a></p>
<?php // echo strlen($post->body);?>
<!--- <a><span>Διάβασέ την συνέχεια..</span></a> -->
</div>
</div>
<div class="tr-tag">
<div style="padding: 1px 0 1px 0; text-align: center">
{{Emoji::findByName("tag")}}Tag:
@foreach($categories as $category)
@if($category->id == $post->category_un)
<a href=""><span class="tag-un">#{{$category->name}}</span></a>,
@endif
@if($category->id == $post->category_fac)
<a href=""><span class="tag-fac">#{{$category->name}}</span></a>
@endif
@endforeach
</div>
</div>
<div class="tr-options">
<a href="" style="color: #dca20f"><span class="cool">(0) {{Emoji::findByName("cool")}}</span></a>
<hr class="vt-hr" />
<a href="" style="color: #AA8062"><span class="poo">(0) {{Emoji::findByName("poo")}}</span></a>
<hr class="vt-hr" />
<a href="" style="color: #000000"><span class="speech">(0) {{Emoji::findByName("speech")}}</span></a>
</div>
</div>
@endif
@endforeach
</div>
<div class="ajax-load text-center" style="display:none">
<p><img src=""></p>
</div>
最后,我在页脚中使用ajax,它通过url调用控制器并获得具有相同限制的数据
<script type="text/javascript">
$(window).scroll(function() {
var flag = 0;
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
$.ajax(
{
url: '/posts',
type: 'get',
/*beforeSend: function()
{
$('.ajax-load').show();
}*/
data: {
'offset': flag,
'limit': 8
},
success: function(data){
$('.ajax-load').hide();
$("#grid").append(data.html);
flag += 8;
}
})
}
});
function loadMoreData(){
$.ajax(
{
url: '/posts',
type: 'get',
/*beforeSend: function()
{
$('.ajax-load').show();
}*/
data: {
'offset': 0,
'limit': 8
}
})
.done(function(data)
{
if(data.html == " "){
$('.ajax-load').html("No more records found");
return;
}
$('.ajax-load').hide();
$("#grid").append(data.html);
flag += 8;
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('server not responding...');
});
}
Ajax将所有数据显示到posts.load中的代码副本中。
@foreach($posts as $post)
@if(strlen($post->body) < "701")
<div class="item">
<div class="col-col-12 tr-share share" style="padding: 1px 0 1px 0">
<span class="time">{{$post->created_at}}</span>
<a href="">
<span class="emoji">
{{Emoji::findByName("link")}}
</span>
</a>
<a href="">
<span class="emoji">
{{Emoji::findByName("mail")}}
</span>
</a>
<a href="">
<span class="emoji">
{{Emoji::findByName("pin")}}
</span>
</a>
</div>
<div class="tr-text">
<div class="col-md-12 td-text">
<p><a>{{$post->body}}</a></p>
</div>
</div>
<div class="tr-tag">
<div style="padding: 1px 0 1px 0; text-align: center">
{{Emoji::findByName("tag")}}Tag:
@foreach($categories as $category)
@if($category->id == $post->category_un)
<a href=""><span class="tag-un">#{{$category->name}}</span></a>,
@endif
@if($category->id == $post->category_fac)
<a href=""><span class="tag-fac">#{{$category->name}}</span></a>
@endif
@endforeach
</div>
</div>
<div class="tr-options">
<a href="" style="color: #dca20f"><span class="cool">(0) {{Emoji::findByName("cool")}}</span></a>
<hr class="vt-hr" />
<a href="" style="color: #AA8062"><span class="poo">(0) {{Emoji::findByName("poo")}}</span></a>
<hr class="vt-hr" />
<a href="" style="color: #000000"><span class="speech">(0) {{Emoji::findByName("speech")}}</span></a>
</div>
</div>
@elseif(strlen($post->body) > "700")
<div class="item">
<div class="col-col-12 tr-share share" style="padding: 1px 0 1px 0">
<span class="time">{{$post->created_at}}</span>
<a href="">
<span class="emoji">
{{Emoji::findByName("link")}}
</span>
</a>
<a href="">
<span class="emoji">
{{Emoji::findByName("mail")}}
</span>
</a>
<a href="">
<span class="emoji">
{{Emoji::findByName("pin")}}
</span>
</a>
</div>
<div class="tr-text">
<div class="col-md-12 td-text">
<p class="more"><a>{{$post->body}}</a></p>
<?php // echo strlen($post->body);?>
<!--- <a><span>Διάβασέ την συνέχεια..</span></a> -->
</div>
</div>
<div class="tr-tag">
<div style="padding: 1px 0 1px 0; text-align: center">
{{Emoji::findByName("tag")}}Tag:
@foreach($categories as $category)
@if($category->id == $post->category_un)
<a href=""><span class="tag-un">#{{$category->name}}</span></a>,
@endif
@if($category->id == $post->category_fac)
<a href=""><span class="tag-fac">#{{$category->name}}</span></a>
@endif
@endforeach
</div>
</div>
<div class="tr-options">
<a href="" style="color: #dca20f"><span class="cool">(0) {{Emoji::findByName("cool")}}</span></a>
<hr class="vt-hr" />
<a href="" style="color: #AA8062"><span class="poo">(0) {{Emoji::findByName("poo")}}</span></a>
<hr class="vt-hr" />
<a href="" style="color: #000000"><span class="speech">(0) {{Emoji::findByName("speech")}}</span></a>
</div>
</div>
@endif
@endforeach
所以我的问题是,为什么这总是带来相同的数据? 每次我到达滚动的结尾并且ajax调用控制器时,它都会粘贴前8个帖子,而不是下8个帖子。 我是否缺少某些内容或我的代码有误? 任何帮助将不胜感激。
在@Shan的帮助下,我发现了问题。
首先,我在此页脚中固定了我的js:
<script type="text/javascript">
var pageNumber = 2;
$(document).ready(function() {
$.ajax({
type : 'GET',
url: "websiteURL/posts?page=" +pageNumber,
success : function(data){
pageNumber +=1;
if(data.length == 0){
}else{
$('#grid').append(data.html);
}
},error: function(data){
},
})
});
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
$.ajax({
type : 'GET',
url: "websiteURL/posts?page=" +pageNumber,
success : function(data){
pageNumber +=1;
if(data.length == 0){
}else{
$('#grid').append(data.html);
}
},error: function(data){
},
})
}
});
function loadMoreData(){
$.ajax({
type : 'GET',
url: "http://communitune.com/posts?page=" +pageNumber,
success : function(data){
pageNumber +=1;
if(data.length == 0){
// :( no more articles
}else{
$('#grid').append(data.html);
}
},error: function(data){
},
})
}
</script>
然后我把固定控制器也放进去
public function index(Request $request)
{
$posts = Post::orderBy('created_at', 'desc')->paginate(8);
//$posts = Post::orderBy('created_at', 'desc')->limit(8)->get();
$categories = Category::all();
if ($request->ajax()) {
$view = view('posts.load', compact('posts', 'categories'))->render();
return response()->json(['html'=>$view]);
}
return view('posts.display', compact('categories', 'posts'));
}
致谢@Shan的评论是谁帮助我解决了这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.