我试图弄清楚我所做的事情是否正确。我有一个评论表单,当它被点击时,我通过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>
答案 0 :(得分:0)
还有......欢迎来到AngularJS! 在角度你可以写你的HTML并为其分配一个javascript控制器,执行ajax请求,在ajax完成后你可以自动将返回的数据绑定到html!这意味着角度刷新您的HTML并为您完成所有工作。甚至可以执行循环,例如,在表格中输入等等......