如何使用javascript刷新laravel中的includes视图而不是整个视图

Question

网页有一个订单表单，它将数据提交给购物车容器的实例。

我可以在不刷新整个页面的情况下使用javascript来完成此操作。我的问题是，我想更新该页面的部分视图，特别是显示购物车中所有项目的侧栏(_includes.cart(，以及显示总项目的导航栏上的图标购物车。

这是我的html

<form action="{{route('cart.store', $item)}}" method="Post" class="ajax">
{{csrf_field()}} 
<input type="hidden" name="id" value="{{$item->id}}">
<input type="hidden" name="prod_desc" value="{{$item->prod_desc}}">
<input type="hidden" name="concept" value="{{$item->concept}}">
<input type="hidden" name="unit_price" value="{{$item->unit_price}}">
<input type="hidden" name="pictures" value="{{$item->pictures}}">
<button type="submit"><i class="fa fa-plus-square"></i></button> 
</form> 

这是我的javascript

$('form.ajax').on('submit', function(){
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value){
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
type: type,
url: url,
data: data,
success: function(response) {
}
});
return false;
});

这是我想刷新的视图

@include('_includes.cart') 

这是购物车视图

<h5>YOUR CART</h5>
<div > 
@if (Cart::count() > 0)
<h5>{{ Cart::count()}} item(s) in Cart</h5>
<div class="cart-table">
@foreach (Cart::content() as $item)
<div class="cart-table-row">
<div class="cart-table-row-left">                    
<div class="cart-item-details">
<div class="cart-table-item">
<a href="">{{$item->model->prod_desc}}</a>
</div>                       
</div>
<div class="cart-table-price">
{{'BD ' . number_format($item->model->unit_price * $item->qty, 3)}}
</div>
</div>
@endforeach
</div>
@else
<div class="cart-logo">
<i class="fa fa-shopping-bag"></i>
</div>
<h5>There are no items in your cart</h5>
@endif
</div>

我在手推车控制器上试过这个，但没有按预期进行。

$view = view('_includes.cart');
echo $view->render();

Answer 1

您可以将包含的视图包装在容器中，并使用Ajax响应更改该容器的内部HTML

例如，让我们向提取的welcome视图的链接块添加一个随机字符串，并刷新包含视图的链接块

welcome.blade.php

<div class="content">
<div class="title m-b-md">
Laravel
</div>
<button onclick="refresh_links()">Refresh View</button>
<div id="links_container">
@include('links')
</div>
</div>
</div>
<script src="/js/app.js"></script>
<script>
function refresh_links() {
$.get('/getLinks', function(data) {
document.getElementById('links_container').innerHTML = data;
})
}
</script>

links.blade.php

<div class="links">
<a href="">{{ $link ?? null }}</a>
<a href="https://laravel.com/docs">Docs</a>
<a href="https://laracasts.com">Laracasts</a>
<a href="https://laravel-news.com">News</a>
<a href="https://blog.laravel.com">Blog</a>
<a href="https://nova.laravel.com">Nova</a>
<a href="https://forge.laravel.com">Forge</a>
<a href="https://vapor.laravel.com">Vapor</a>
<a href="https://github.com/laravel/laravel">GitHub</a>
</div>

路线

Route::get('/getLinks', function () {
$link = str_random();
return view('links', compact('link'));
});

现在，每次单击按钮时，视图都会刷新一个链接的新随机字符串

Answer 2

我将通过3个步骤解决这个问题

1( 在控制器中添加返回渲染视图的路由和函数示例：

public function load(Request $request)
{
$galleryItems = "";
$articles= Article::all();
foreach ($articles as $article) {
$galleryItems .=
view(
'components.article-gallery-item',
["article"=>$article]
)->render() ;
}
return $galleryItems;
}

2( 在需要时用ajax请求调用路由

始终记得在您的视图中包括@crsf，并首先创建路线

$.ajax({
url:"{{ route('articles.load') }}",
method:"POST",
data:{
_token:_token,
},
success:function(data)
{
$('#yourContainer').empty();
$('#yourContainer').append(data);
}
});

3( 清空要"刷新"的容器，并将控制器返回的新呈现视图附加到ajax请求中(之前在脚本中已经完成(