gpt4 book ai didi

javascript - 拉拉维尔 5.8 : Auto refresh div becomes messy and laggy using ajax

转载 作者:行者123 更新时间:2023-12-02 23:19:43 33 4
gpt4 key购买 nike

我有一个网站,每条新闻都有评论部分。我想使用 ajax 函数每 x 秒更新一次 div。但是,当我将 ajax 代码放入脚本中时,div 变得困惑,我的网站变得滞后,并且控制台中出现很多错误。有人对此有什么想法吗?这是我的输出:

在我实现代码之前:/image/AHKJF.jpg之后:/image/AE7Dj.jpg

shownews.blade.php

Comments area

<h4 class="comments-title" > <span class="fas fa-comment-alt"></span>
{{$news->comments()->count()}}
Comments</h4>
<div class="row" >
<div class="col-md-12 col-md-offset-2" style="overflow-y: scroll; height: 400px;
width: 400px; " id="commentarea" >

@foreach($news->comments as $comment)
<div class="comment" style="background-color: #f6efef;" >
<div class="author-info">
<img src={{"https://www.gravatar.com/avatar/" . md5(strtolower(trim($comment->email))) . "?s=50&d=retro" }} class="author-image" id="image">

<div class="author-name">
<h4>{{$comment->name}} </h4>
<p class="author-time"> {{ date('jS F, Y - g:iA' ,strtotime($comment->created_at)) }}</p>
</div>
</div>
<div class="comment-content">
{{$comment->comment}}
</div>
</div>
@endforeach
</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function() {
$('#commentarea').load('{{ action('NewsController@showNews', ['news' => $news->id]) }}');
}, 5000);
});
</script>

NewsController.php

<?php

namespace App\Http\Controllers;
use DB;
use Illuminate\Http\Request;
use App\News;
use Validator;
use Image;
use View;
use Storage;
use Illuminate\Support\Facades\Input;
// use App\Http\Controllers\Controller;

class NewsController extends Controller
{

//Shownews method. This is where the individual news is shown with its comments.

public function showNews($id)
{

$all = DB::table('news')->get();
$news = News::find($id);
return View::make('coin.shownews', compact('news','all'));
}
}

评论 Controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Comment;
use App\News;
use App\Graph;
use Validator;
use Session;


class CommentsController extends Controller
{
public function store(Request $request, $news_id)
{
//
$this->validate($request, array(
'name'=> 'required | max:255',
'email'=> 'required| email | max:255',
'comment'=> 'required | min:5'
));

$news = News::find($news_id);

$comment = new Comment();

$comment->name = $request->name;
$comment->email = $request->email;
$comment->comment = $request->comment;
$comment->approved = true;
$comment->news()->associate($news);

$comment->save();


// return $comment->toJson();

return redirect()->route('article', [$news->id]);
}

最佳答案

其行为之所以如此,是因为您在调用 View 时正在加载整个网页。所以需要将其分离出来,使用ajax来调用 View 中可以使用@include的数据。

Comments area

<h4 class="comments-title" > <span class="fas fa-comment-alt"></span>
{{$news->comments()->count()}}
Comments</h4>
<div class="row" >
<div class="col-md-12 col-md-offset-2" style="overflow-y: scroll; height: 400px;
width: 400px; " id="commentarea" >
@include('table_data')
</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function() {
var page = window.location.href;
$.ajax({
url: page+'/table,
success:function(data)
{
$('#commentarea').html(data);
}
});
}, 5000);
});
</script>

创建包含 Blade ,然后放入注释区域所需的元素table_data.blade.php

                      @foreach($news->comments as $comment)
<div class="comment" style="background-color: #f6efef;" >
<div class="author-info">
<img src={{"https://www.gravatar.com/avatar/" . md5(strtolower(trim($comment->email))) . "?s=50&d=retro" }} class="author-image" id="image">

<div class="author-name">
<h4>{{$comment->name}} </h4>
<p class="author-time"> {{ date('jS F, Y - g:iA' ,strtotime($comment->created_at)) }}</p>
</div>
</div>
<div class="comment-content">
{{$comment->comment}}
</div>
</div>
@endforeach

当然你需要有另一个路由和 Controller 中的另一个函数

<?php

namespace App\Http\Controllers;
use DB;
use Illuminate\Http\Request;
use App\News;
use Validator;
use Image;
use View;
use Storage;
use Illuminate\Support\Facades\Input;
// use App\Http\Controllers\Controller;

class NewsController extends Controller
{

//Shownews method. This is where the individual news is shown with its comments.



public function showNews($id)
{
$new = News::find($id);
return view('coin.shownews')->with('new', $new);
}
public function commentData($id);
{
$all = DB::table('news')->get();
$news = News::find($id);
return view('table_data', compact('news', 'all'))->render();
}
}

然后添加路线web.php

`Route::get('article/{id}/commentData', 'NewsController@commentData')`;
//you must change the name of the route base on your url just add the /table. Route can't be the same so you need to add that

希望对你有帮助!

关于javascript - 拉拉维尔 5.8 : Auto refresh div becomes messy and laggy using ajax,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56999588/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com