javascript - Laravel 5.1 - 使用 ajax 更新商店后的评论列表

Question

我正在使用ajax做评论系统，我想在提交新评论后更新评论列表。我该怎么做？

评论列表:

frontController.php

public function listing()
    {
        $commenti = Comment::OrderBy('id','DESC')->get();


        return response()->json(
            $commenti->toArray()
            );
    }

文章.blade.php

<table class="table">
     <thead>
         <th> all comments</th>          
     </thead>
     <tbody id="datos"></tbody>
</table>

commentList.js

$(document).ready(function(){

        var tablaDatos = $("#datos");
        var route = "http://localhost:8000/commentList";

        $.get(route, function(res){

            $(res).each(function(key,value){
                tablaDatos.append("<tr><td>"+value.content+"</td></tr>")

               });
           });

        });

存储新的评论系统

CommentController.php

public function store(Request $request)
    {

        if($request->ajax()){
            $comment = new Comment();
            $comment->content = $request->input('content'); 
            $comment->user_id = $request->input('user_id'); 
            $comment->product_id = $request->input('product_id');
            $comment->article_id = $request->input('article_id');  

            $comment->save(); 

            // maybe here insert a call to update list of comments ???

            return response()->json([

                "mensaje" => "Pubblished!"
            ]);
        }
}

文章.blade.php

{!! Form::open(['route'=>'comment.store'] )!!}   

       MY INPUTS... STORE COMMENT WORK WELL. 

{!! Form::close()!!}

storecomment.js

$("#commento").click(function(){

    var dato= $("#content").val();
    var dato2= $("#user_id").val();
    var dato3= $("#article_id").val();
    var dato4= $("#product_id").val();
    var route = "http://localhost:8000/comment";
    var token = $("#token").val();

    $.ajax({
        url: route,
        headers:{'X-CSRF-TOKEN':token},
        type: 'POST',
        dataType: 'json',
        data:{
            content: dato, 
            user_id: dato2, 
            article_id: dato3, 
            product_id: dato4
        },

        success:function(){
            $("#msj-success").fadeIn();
        }
    });

});

路线

Route::resource('comment', 'CommentController');
Route::get('commentList','FrontController@listing');

Answer 1

我认为当使用 jQuery 成功添加新评论时，您可以将新评论附加到评论列表。

为此，请尝试使用以下代码:

// storecomment.js
$("#commento").click(function(){

    var dato= $("#content").val();
    var dato2= $("#user_id").val();
    var dato3= $("#article_id").val();
    var dato4= $("#product_id").val();
    var route = "http://localhost:8000/comment";
    var token = $("#token").val();

    $.ajax({
        url: route,
        headers:{'X-CSRF-TOKEN':token},
        type: 'POST',
        dataType: 'json',
        data:{
            content: dato, 
            user_id: dato2, 
            article_id: dato3, 
            product_id: dato4
        },

        success:function(){
            $("#msj-success").fadeIn();

            // comment added, add it to the comments list
            var tablaDatos = $("#datos");
            tablaDatos.append("<tr><td>"+dato+"</td></tr>");
        }
    });

});