如何使用javascript在laravel中刷新包含视图而不是整个视图？

2024-05-02 • 问答

网页具有订购表，可将数据提交到购物车容器的实例。

使用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();

您可以将包含的视图包装在容器中，并使用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'));
});

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

希望这会有所帮助

我将分三步解决这个问题

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请求中（之前已在脚本中完成）

如何使用javascript在laravel中刷新包含视图而不是整个视图？

jackybye 回答：如何使用javascript在laravel中刷新包含视图而不是整个视图？

大家都在问