使用 JavaScript 将 Laravel 刀片模板附加/添加到当前视图答案

【问题标题】：Append/Add Laravel blade template to current view using JavaScript使用 JavaScript 将 Laravel 刀片模板附加/添加到当前视图
【发布时间】：2020-06-16 01:25:22
【问题描述】：

所以，我有这个：

item.blade.php(位置：'pages/components/item.blade.php')

<div>
 // some php logic
test
</div>

list.blade.php

// some laravel blade logic

<script>
    function onAddItem() {

// the code above doesn't work
        $.get("visitor.pages.service.html", function(data){
           $('#appends').append(data);
        });
      }
    }

</script>


<div>
  <button onclick="onAddItem()">add item</button>

  <div id="list">
    @include('pages.components.item', ['someVars'=> false]); //this displays OK
  </div>

</div>

现在我想做的是，当我单击添加项目按钮时，它还应该在 list (id) div 中添加另一个 pages.components.item 模板。

我已经尝试过这些帖子的答案：

但两个答案都不起作用。

【问题讨论】：

标签： javascript php laravel laravel-blade

【解决方案1】：

你应该使用

function onAddInvoiceItem()

不是

function addItem()

因为你在这里用onAddInvoiceItem() 调用它：

<button onclick="onAddInvoiceItem()">add item</button>

【讨论】：

哎呀我的错，但它是一样的，我只是忘记重命名另一个时把它放在这里。

【解决方案2】：

作为the answer pointed，您不能这样做，因为刀片是服务器端处理的。不过有一种解决方法，但代价高昂且容易出现漏洞：创建自定义路由，在需要时输出所需的刀片文件。

在routes.php:

Route::get('/blades/{path_to_blade}', function($path_to_blade){
    return view($path_to_blade);
})->where('path_to_blade', '^[a-z0-9\_\-\.]+$');

然后您可以使用 ajax 调用或其他任何方式来调用请求的模板。我正在使用 jQuery 作为演示：

$.ajax({
    url: "/blades/template.path",
    cache: false,
    success: function(html){
        $("#element_in_which_to_insert").append(html);
    }
});

您也可以在浏览器中请求模板：/blades/template.path。 但又一次：这种方法容易出现漏洞。您应该改用 Vue 或 Angular 等前端框架。

【讨论】：