如何使用 AJAX 渲染部分内容？拉拉维尔 5.2

Posted 2023-03-14

【中文标题】如何使用 AJAX 渲染部分内容？拉拉维尔 5.2

【英文标题】：How to render partial using AJAX? Laravel 5.2

【发布时间】：2016-10-05 10:59:49

【问题描述】：

我想列出存储在 mysql 数据库中的停车位信息。我正在使用 AJAX 调用 API 端点 (/api/spots) 并返回一个点列表。我使用刀片语法为信息的布局创建了一个局部视图（partials/Spot.blade.php）。

我想知道是否有一种方法可以创建一个控制器方法，该方法将返回部分视图并将其呈现到页面的一部分，而无需返回服务器。这可以使用我的 partials/Spot.blade.php 吗？也许我应该创建一个方法来将其中的所有 html 数据作为字符串返回，并使用 get JS 将其添加到 DOM 中？

我目前的做法是在页面初始加载时渲染 partials/Spot.blade.php，然后使用 CSS 将其从屏幕上移除。然后在 AJAX 调用服务器之后，我在这个隐藏的部分中抓取 HTML 并使用 REGEX 将数据放置在布局中。不过，这似乎有点脏。只是想知道其他人是如何解决这个问题的。

非常感谢您的反馈，

马特

【参考方案1】：

这很简单（：

看看这个例子并做出你自己的修改：

控制器：

class StatisticsController extends Controller


    public function index()
    
        return view('statistics.index');
    


    public function filter(Request $request, $fields) 
        // some calculation here...
        return view('statistics.response', compact('stats')); // will render statistics/response.blade.php file with passing results of filter
    

观看次数：

带有日期过滤的页面 统计/index.blade.php

@extends('layouts.billing')

@section('title') Statistics @stop

@section('js_footer')
    <script>
        function doGet(url, params) 
            params = params || ;

            $.get(url, params, function(response)  // requesting url which in form
                $('#response').html(response); // getting response and pushing to element with id #response
            );
        

        $(function() 
            doGet('/statistics/filter'); // show all

            $('form').submit(function(e)  // catching form submit
                e.preventDefault(); // preventing usual submit
                doGet('/statistics/filter', $(this).serializeArray()); // calling function above with passing inputs from form
            );
        );
    </script>
@stop

@section('content')
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3>Statistics</h3>
                </div>
                <div class="panel-body">
                    <form>
                        <label>Time</label>
                        <div class="input-group">
                            <input type="text" name="time_from" value=" date('Y-m').'-01 00:00:00' "  class="form-control"  autocomplete="off">
                            <input type="text" name="time_to" value=" date('Y-m-d H:i:s', time()) "  class="form-control"  autocomplete="off">
                        </div>

                        <button type="submit" class="btn btn-sm btn-primary pull-right">
                          <i class="fa fa-search"></i> Show
                        </button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div id="response"> HERE WILL BE INJECTED RESULT OF FILTERING </div>
        </div>
    </div>
@stop

以及过滤渲染结果的部分：

统计/response.blade.php

<div class="table-responsive">
    <table class="table table-striped table-borderless text-center">
        <thead>
            <th>ID</th>
            <th>Partner</th>
            <th>Tariffs</th>
            <th>Total</th>
        </thead>
        <tbody>
        @foreach($stats AS $stat)
            some data here
        @endforeach
        </tbody>
    </table>
  </div>

【讨论】：

因此控制器返回了一个列出所有统计信息的部分，并且在获取成功时，您将用信息列表替换内容。好的！并感谢您提供示例代码！ :D

说我想继续追加到列表中，但随着查询的变化只有新的项目。因此，一些事件触发了，我使用 AJAX 运行了一个新查询，并且真的只想添加到已经呈现的列表中。怎么办？

这更像是 JS 问题而不是 laravel 问题。您始终可以对容器执行 append() 以获取 ajax 结果。否则考虑使用 json 响应并使用 mustachejs 进行渲染