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

2024-04-10

我现在的情况是想列出有关存储在 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 将数据放置在布局中。不过这看起来有点脏。只是想知道其他人是如何解决这个问题的。

我们将非常感谢您的反馈,

Matt


这很简单 (:

查看此示例并进行自己的修改:

控制器:

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
    }
}

views:

带有日期过滤功能的页面 统计/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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 AJAX 渲染部分内容?拉拉维尔 5.2 的相关文章

随机推荐

  • Android 上的 EditText 中只有文本吗?

    我只想在 Android 应用程序的 edittext 中输入文本 输入 例如 仅输入 文本 A gt Z 不允许输入数字或特殊字符 请给我一个想法 应该怎么做 非常感谢 试试这个方法 android digits abcdefghijkl
  • 模拟外部 API 以使用 Python 进行测试

    Context 我正在尝试为查询外部 API 的函数编写测试 这些函数向 API 发送请求 获取响应并处理它们 在我的测试中 我想使用本地运行的模拟服务器来模拟外部 API 到目前为止 模拟服务器已成功运行并响应自定义 GET 查询 问题
  • 如何垂直分割250k列的文件?

    我需要根据大小 首选 或列数将 250k 的文件拆分为几个 5 块 我知道split命令用于按行拆分 但不知道是否有类似的函数用于按列拆分 我的文件中的列数不均匀 因此块不能具有相同的列数 Input AA BB CC DD EE FF G
  • Groupby 过滤器,基于连续序列排序以及 ID 和日期列

    我有一个数据框 如下所示 ID Status Date 0 1 F 2017 06 22 1 1 M 2017 07 22 2 1 P 2017 10 22 3 1 F 2018 06 22 4 1 P 2018 08 22 5 1 F 2
  • jar 名称中的版本

    当我将 maven 项目导入 Intellij 时 它生成的 jar 文件不包含版本 但是maven生成的jar有name version jar格式 所以我最终得到了两个 jar 文件 一个有版本 另一个没有版本 我当然可以在 Intel
  • Javascript:关闭字符串中打开的 HTML 标签

    我有一个包含 HTML 代码的 JavaScript 字符串 我显示它 并根据字数附加了一个阅读更多 更少切换器 问题是 当我缩小 HTML 代码时 它可能有开放标签 假设 p A computer is a general purpose
  • 使用 MySQL 实现物化视图(汇总表)的首选方法

    我正在工作中开发一个项目 我需要为其创建和维护汇总表出于性能原因 我相信正确的术语是物化视图 我这样做有两个主要原因 非规范化 我尽可能地规范化表格 因此 在某些情况下 我必须连接许多表才能提取数据 我们使用 MySQL Cluster 它
  • 如何使用swift在表格视图中实现图像的延迟加载

    我想使用 swift 对我的表视图使用延迟加载概念 在我的表格视图中 我显示了多个包含产品图像和产品名称的单元格 请帮助我找到解决方案 旧的解决方案 因为你没有显示任何代码 这是给您的示例 func tableView tableView
  • 如何在运行时创建 celery 队列,以便工作人员拾取发送到该队列的任务?

    我正在使用 django 1 4 celery 3 0 rabbitmq 为了描述该问题 我的系统中有许多内容网络 并且我需要一个队列来处理与每个网络相关的任务 然而 内容是在系统运行时动态创建的 因此我需要动态创建队列并让现有工作人员开始
  • CSS 变量中的 CSS calc() 行为

    我对使用 calc 设置 CSS 变量的行为感到好奇 Example test halfWidth calc 100 2 现在 如果 test元素 比如说div 宽 500px 我想要 halfWidth变量设置为 250px 但是 据我所
  • 急切地处置 ManualResetEvent

    我有一个类 它允许其他线程等待 直到它使用 a 完成操作ManualResetEventSlim 操作通常很简短 这个类没有明确的生命周期 因此没有一个地方可以轻松关闭该事件 相反 我想在事件完成后立即关闭该事件 一旦收到信号 并且在任何等
  • 在 Android 中滚动 listView 时选定的列表项颜色会移动

    在我的 Android 应用程序中 我使用列表视图 列表视图的代码如下
  • 在Python中将文本输出到多个终端

    我使用Python和ArchLinux 我正在用 Python 编写一个简单的人工智能作为学校项目 因为这是一个学校项目 并且我想清楚地演示它在做什么 所以我的目的是有一个不同的终端窗口来显示每个子进程的打印输出 一个终端显示句子如何被解析
  • 将画布设置为背景 - Javascript [重复]

    这个问题在这里已经有答案了 我试图弄清楚如何将我创建的画布转换为 HTML 正文的背景图像 谢谢
  • 如何使用样条线绘制 Cox 风险模型

    我有以下模型 coxph Surv fulength mortality 1 pspline predictor 其中 fulength 是随访时间 包括死亡率 predictor 是死亡率的预测因子 上面命令的输出是这样的 coef se
  • R 直方图中的确切箱数

    我在 R 中制作直方图时遇到困难 问题是我告诉它制作 5 个容器 但它制作了 4 个 我告诉它制作 5 个 它制作了 8 个 data lt c 5 28 14 64 37 25 78 9 44 92 8 96 19 22 34 81 33
  • Excel:列出 2 个数字之间的数字

    我想知道是否有人知道列出 2 个值之间的所有数字的公式 例如 如果单元格 F2 中有 12 而 G2 中有 17 我想要一个显示 13 14 15 16 的公式在单元格 H2 中 Thanks 使用 Excel 工作表函数无法完成此操作 为
  • SQL Server 2000 相当于 ON DUPLICATE KEY?

    SQL Server 2000 是否有与 MySQL ON DUPLICATE KEY 子句等效的功能 这个答案 https stackoverflow com questions 1197733 does sql server offer
  • CoreData 获取关系计数和按另一个关系分组的请求 (m2n)

    在我的 CoreData 模型中 我有一个使用中间实体建模的 n2n 关系 Person 1 lt Person2Appointment gt 1 Appointment The Person2Appointment实体看起来像这样 int
  • 如何使用 AJAX 渲染部分内容?拉拉维尔 5.2

    我现在的情况是想列出有关存储在 MYSQL 数据库中的停车位的信息 我正在使用 AJAX 调用 API 端点 api spots 并返回景点列表 我使用刀片语法创建了一个部分视图来布局信息 partials Spot blade php 我