Laravel @include 通过 ajax 的刀片视图

Posted 2023-03-14

【中文标题】Laravel @include 通过 ajax 的刀片视图

【英文标题】：Laravel @include a blade view via 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 请求以包含该文件。

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

手指交叉

【参考方案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);
     
  );