我目前正在用Ajax工作。到目前为止,它的运行情况还算不错,但是在不重新加载页面的情况下将数据加载到视图中仍然存在问题。也就是说,如何在不重新加载页面的情况下用ajax重新加载div中的某些内容?
在我的控制器中,指定加载页面时在视图中显示的内容。
控制器:
public function index($param)
{
$user = User::where('slug', $param)->orWhere('id', $param)->first();
if ($user) {
$followers = $user->followers()->where('followers.active', 1)->latest()->paginate(50);
$profileimages = $AllProfileImages = ProfilesProfileimage::where('profile_id', $user->profile->id)->latest()->get();
} else {
return back()->with('success', lang::get('messages.nokonto'));
}
return view('profiles.follower', compact('user','followers', 'profileimages'));
}
在我看来,我有html代码并提供了要显示的数据。
查看:
@foreach ($user->followers as $follower)
<div id="follower_{{$follower->id}}" class="box-icon">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="testimonial">
<figure class="float-left">
@if ($follower->profile->privacy == [1,2] OR $follower->isfollowed(Auth::user()) OR Auth::id() == $follower->id)
<a href="/profile/{{$follower->username}}">
<img class="rounded avatarcomment img-fluid float-left pt-3 pl-3" src="{{ Storage::url($follower->profile->getProfilePicAttribute()) }}">
</a>
@else
<img class="rounded avatarcomment img-fluid float-left pt-3 pl-3" src="{{ Storage::url($follower->AnonymAvatar) }}">
@endif
</figure>
<div class="float-left pt-6">
<p class="fs-14 pl-5 username bold">@if ($follower->profile->privacy == [1,2] OR $follower->isfollowed(Auth::user()) OR Auth::id() == $follower->id) <a href="/profile/{{ $follower->username }}">{{$follower->username}}</a> @else AC @endif</p>
<p class="mtm-20 pt-5 pl-5 fs-12"><i class="glyphicon glyphicon-map-marker"></i> nah</p>
</div>
<div class="float-right m-0">
@if (Auth::user())
@if (Auth::id() == $follower->id)
@else
@if ($follower->isfollowed(Auth::user()))
<div class="btn-group-vertical">
<button id="follow_button_{{$follower->id}}" type="submit" class="btn btn-primary btn-xs btn-follow @if (Auth::id() == $user->id) mt-10 @else mt-25 @endif" data-id="{{ $follower->id }}" style="display: none;">abonnieren</button>
<button id="unfollow_button_{{$follower->id}}" type="submit" class="btn btn-default btn-xs btn-unfollow @if (Auth::id() == $user->id) mt-10 @else mt-25 @endif" data-id="{{ $follower->id }}">nicht mehr folgen</button>
@if (Auth::id() == $user->id)
<button type="submit" class="btn btn-default btn-xs btn-destroy-follow" data-id="{{ $follower->id }}">entfernen</button>
@endif
</div>
@else
<div class="btn-group-vertical">
<button id="follow_button_{{$follower->id}}" type="submit" class="btn btn-primary btn-xs btn-follow @if (Auth::id() == $user->id) mt-10 @else mt-25 @endif" data-id="{{ $follower->id }}">abonnieren</button>
<button id="unfollow_button_{{$follower->id}}" type="submit" class="btn btn-default btn-xs btn-unfollow @if (Auth::id() == $user->id) mt-10 @else mt-25 @endif" data-id="{{ $follower->id }}" style="display: none;">nicht mehr folgen</button>
@if (Auth::id() == $user->id)
<button type="submit" class="btn btn-default btn-xs btn-destroy-follow" data-id="{{ $follower->id }}">entfernen</button>
@endif
</div>
@endif
@endif
@endif
</div>
</div>
<div class="col-md-12">
<hr class="m-0">
</div>
</div>
</div>
@endforeach
当用户单击.btn-follow按钮时,该用户将被添加到订阅列表中,并且数据将相应地存储在数据库中。如何更新视图或重新加载列表中的用户显示为关注者的数据?如果没有,我是否会重新加载整个页面?
Ajax:
$('body').on('click','.btn-follow',function(e) {
e.preventDefault();
var id = $(this).data("id");
$.ajax({
type: 'POST',
url: '/profile/follow/' + id,
success: function (data) {
_toastr_new(data.message, "top-full-width", "success", false, '.toastr-notify', 0);
$("#follow_button_" + id).hide();
$("#unfollow_button_" + id).show();
},
error: function (xhqr, staus, message) {
var response = JSON.parse(xhqr.responseText);
var errors = response.errors;
for (var error_key in errors) {
var error = errors[error_key];
_toastr_new(error, "top-full-width", "error", false, '.toastr-notify', 0);
}
}
});
});