Laravel @include 通过 ajax 的刀片视图答案

【问题标题】：Laravel @include a blade view via ajaxLaravel @include 通过 ajax 的刀片视图
【发布时间】：2018-03-09 00:06:27
【问题描述】：

我有一个页面会@include 一些内容，我想@include 使用ajax 请求的刀片视图文件。我该怎么做。

基本上，视图文件将从服务器获取项目，

**price.blade.php**
@foreach ($items as $item)
<div class="item-post">
  <div class="priceofitem">{{ $item->price }} </div>

我想在我的标签部分包含@include('price.blade.php')

<ul class="tabs">
<li><a href="#tab1">Prices </li>
<div id="tab1">@include('price.blade.php')</div>

我不想在加载时自动包含该视图文件，因为我不想加载该选项卡的内容，除非用户单击它，如果用户想要价格而不是用户单击该选项卡，并且将发送 AJAX 请求以包含该文件。

希望我说清楚了，如果您不理解我，请告诉我。

手指交叉

【问题讨论】：

标签： javascript jquery ajax laravel blade

【解决方案1】：

发出您的 ajax 请求并从控制器函数返回视图，例如：

return view('your_view');

在 ajax success 函数中，将其附加到您想要的位置：

success: function(response){
    $('#Id').html(response);
}

流程是这样的：

$('#tab').click(function(){
    // ajax call here
    ...
    success: function(response){
        $('#Id').html(response);
    }
});

控制器：

function funcName()
{
    // Do what ever you want
    return view('your_view');
}

【讨论】：

谢谢。我也是 Laravel 和 AJAX 的新手。在上面的上下文中发出 ajax 请求的最佳方法是什么。
@ChrisMkp 对不起，我得到你了吗？
点击#tab1时如何在上面发出ajax请求，而这个ajax请求会得到price.blade.php视图。在返回视图时我应该使用哪个控制器功能，一个新的？
一点帮助都没有:(
这个可以用吗？我有点困惑。有人帮忙！

【解决方案2】：

通过 ajax 请求，您可以从服务器获取已编译的视图并将该值生成到某个父根，例如在 promise .then 调用中。

在服务器端，您可以在路由中使用简单的 HTTP 请求处理程序：

Route::get('/', function () {
    return view('price'); // here you can pass params for compiling blade template
});

【讨论】：

但是没有实现AJAX调用，我要实现AJAX

【解决方案3】：

你想要类似的东西

$(document).ready(function() {
    $("#tab1").click(function() {
        $.ajax({
            type: 'POST', 
            url : "/yourrouteview", 
            success : function (data) {
                $("#tab1").html(data);
            }
        });
    });
});

你的控制器和路由必须配置 /yourrouteview 以获得正确的视图（即@include('price.blade.php')

【讨论】：

【解决方案4】：

像这样在 laravel 中使用带有获取请求的刀片引擎进行带有 id 的 ajax 调用！试试这个。

$(document).ready(function(){
  var id = $(this).data("id");
  $.ajax({
     type: "GET",
     url:"{{ url('your url') }}/"+id,
     cache: false,
     contentType: false,
     processData: false,
     success: function (data) {
       $("#id").html(data);
     },
     error: function (xhr, textStatus, errorThrown) {
       console.log("XHR",xhr);
       console.log("status",textStatus);
       console.log("Error in",errorThrown);
     }
  });

【讨论】：