Javascript 如何改进我的Ajax？

我在想我现在做的是否正确。我有一个注释表单，当它被点击时，我会通过Ajax将注释附加到一个div元素中。当页面被刷新时，那当然会消失，取而代之的是一个foreach循环，它运行并响应注释。因为它们都有相同的CSS属性，所以在用户看来它们是相同的。我这样做的原因是foreach循环只有在刷新后才会更新。有更好的办法吗？我可以直接从数据库更新页面而不刷新吗？我基本上需要，每次用户单击comment按钮时，foreach循环将再次运行，但我找不到如何执行。我感觉像是在用绷带包扎枪弹，就像我现在做的那样

循环：

@foreach（$comment as$comments）
@如果（$comments->image\u id==$image->id）
用户_avatar}“class=”img circle buddy“>
{！！$image->user\u name！！}
{！！$comments->body！！}
@恩迪夫
@endforeach
//在这里，我通过Ajax附加注释，直到用循环替换它的刷新

阿贾克斯：

$（文档）.ready（函数（）{
$（'.send form'）。单击（函数（e）{
e、 预防默认值（）；
var username=“{{$username}}”；
var one=$（'textarea[id=“{{$image->id}}}]”）val（）；
var value=“{{$image->id}}”；
var begin='+'+'+'+'+'+'+'+'+'+'+'+'+'+'++'+'+'+'+'+'+'+'+'+'+'+'+'+'+'+'+'+'+'+'+'+'+'+'+'+'+'+'+'>；
如果（一个长度>0）{
console.log（用户名）；
$（'textarea[id=“{{$image->id}}}]”）val（“”）；
$.ajax({
url:'注释'，
类型：“post”，
发送前：函数（xhr）{
var-token=$（'meta[name=“csrf_-token”]”）。attr（'content'）；
如果（令牌）{
返回xhr.setRequestHeader（'X-CSRF-TOKEN'，TOKEN）；
}                
}, 
数据：{'id'：值，'comment'：一}，
成功：功能（数据）{
$（“.man”）.append（[begin]）；
}，错误：函数（）{
日志（“错误！！！！”）；
} 
});
}      
});  
});

你在自杀。 像你一样通过javascript代码操纵DOM，这真是一项艰巨的工作！ 您不应该在javascript字符串中编写html，必须有另一种方法

还有…欢迎来到AngularJS！

---

在angular中，您可以编写html并为其分配javascript控制器，执行ajax请求，在ajax完成后，您可以将返回的数据自动绑定到html！这意味着angular可以刷新html并为您完成所有工作。甚至可以执行循环，例如，表中的行等。

当用户按评论按钮时，您可以ave通过ajax将评论保存在数据库中，然后使用JQuery SlideDown功能更新页面。我确信本教程将获得您的答案，无需借助框架来实现这一点……我不太确定您要问什么，但如果您希望加载评论而不刷新页面，则可以创建一个PHP脚本，该脚本从数据库（或存储它的任何位置）获取注释数据，并将其输出用于您创建的AJAX调用。基本上，只要您想更新注释，JS就会调用服务器端脚本，然后更新DOM。在jQuery中创建DOM节点的另一种方法如下：

var$element=$（“”）

。然后您可以使用类似于

append（）的方法

添加结构。注释正在保存到数据库中，这不是问题。问题是在foreach循环完成后，运行任何新注释都不会得到响应，因此我添加了额外的div，但这不是一个完美的解决方案。如果希望从foreachloop，然后将该逻辑放在使用AJAX请求的脚本中，并输出HTML（如果您想在JS中构建HTML，则输出数据）在你的

success

回调中，你可以访问服务端脚本的响应，它可能是你添加到DOM中的HTML。老实说，我不确定这是否回答了你的问题，因为它的措辞很笨拙…角度很难。我只需要在每次单击评论时刷新foreach循环，就可以了。不是吗这里有一个更简单的方法来实现这一点除了角度？

@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>

 <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>