如何改进我的Ajax?

时间:2015-06-24 22:12:45

标签: javascript php jquery ajax

我试图弄清楚我所做的事情是否正确。我有一个评论表单,当它被点击时,我通过Ajax将评论附加到div元素中。当页面刷新时,当然会消失,而不是它我有一个foreach循环运行并回应评论。由于它们都具有相同的CSS属性,因此它们看起来与用户相同。我这样做的原因是因为foreach循环只在刷新后才更新。有没有更好的办法?我可以直接从数据库更新页面而无需刷新吗?我基本上需要每当用户点击评论按钮时,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>

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

1 个答案:

答案 0 :(得分:0)

你杀了自己。 通过javascript代码操作DOM,就像你做的那样真的很辛苦! 你不是想在javascript字符串里写html,必须有另一种方法!

还有......欢迎来到AngularJS! 在角度你可以写你的HTML并为其分配一个javascript控制器,执行ajax请求,在ajax完成后你可以自动将返回的数据绑定到html!这意味着角度刷新您的HTML并为您完成所有工作。甚至可以执行循环,例如,在表格中输入等等......