如何改善我的Ajax？

Question

I'm trying to figure out if what I'm doing is the right way. I have a comment form and when it gets clicked I'm appending the comment into a div element through Ajax. When the page is refreshed then of course that would disappear and instead of it I have a foreach loop that runs and echos the comments. Since they both have the same CSS attributes they look the same to the user. The reason I'm doing it this way is because the foreach loop gets updated only after a refresh. Is there a better way? Can I update the page directly from the database without refresh? I basically need that every time a user clicks on the comment button that the foreach loop will run again but I couldn't find how to do it. I feel like I'm covering a gun shot with bandage the way I do it at the moment.

Loop:

@foreach($comment as $comments)
 @if($comments->image_id == $image->id)
  <div id="{{$comments->id}}" class="col-md-5 ajaxrules">
  <div class="deletecomment">
    <i class="fa fa-trash-o"></i>
  </div>
  <div class="col-md-2"> 
    <img src="{{$comments->user_avatar}}" class="img-circle buddy">
  </div>
  <div class="hello col-md-10"> 
    <h4>{!! $image->user_name !!}</h4>
    <p class="left">{!!$comments->body!!} </p>
  </div> 
  </div>
 @endif
@endforeach 

//Where I append the comments through Ajax until the refresh that replaces it with the loop

<div class="man">

</div>

Ajax:

 <script>
  $(document).ready(function(){
    $('.send-form').click(function(e){ 
      e.preventDefault();
       var username = "{{ $username }}";
       var one = $('textarea[id="{{$image->id}}"]').val();
       var value = "{{$image->id}}";

       var begin = '<div class="col-md-5 addavatar">'+'<div class="deletecomment">'+'<i class="fa fa-trash-o">'+'</i>'+'</div>'+'<div class="col-md-2">'+'<img src="{{$profile}}" class="img-circle">'+'</div>'+'<div class="hello col-md-10">'+'<h4>' + username +'</h4>'+'<p>'+one+'</p>'+'</div>'+'</div>';

     if(one.length > 0){
       console.log(username);
       $('textarea[id="{{$image->id}}"]').val('');
    $.ajax({
      url: 'comment',
      type: "post",
        beforeSend: function (xhr) {
        var token = $('meta[name="csrf_token"]').attr('content');
        if (token) {
              return xhr.setRequestHeader('X-CSRF-TOKEN', token);
        }                
    }, 
    data: {'id': value, 'comment': one},
    success:function(data){
        $( ".man" ).append([begin]);
    },error:function(){ 
        console.log("error!!!!");
    } 
   });
  }      
 });  
});

 </script>

Answer 1

You are killing yourself. Manipulate the DOM via javascript code like you do it's really hard work! You are not suppose to write html inside javascript strings, there must be another way!

And there is... Welcome to AngularJS! In angular you can write your html and assign a javascript controller to it, perform ajax request and after the ajax complete you can bind the returned data to the html automatically! That means the angular refresh your html and do all the work for you. Even perform loop of let's say, row in a table, etc...