Laravel 5.1 Ajax 从 Blade View 获取 html

Posted 2023-03-14

【中文标题】Laravel 5.1 Ajax 从 Blade View 获取 html

【英文标题】：Laravel 5.1 Ajax to get html from Blade View

【发布时间】：2016-01-19 17:33:42

【问题描述】：

我在加载 myitems.blade 视图的 ItemsController 中有一个 myitems($filter) 方法。

视图具有作为标签的项目列表和用于获取项目数量的文本框（$items 从 myitems 方法传递到 myitems 视图，并且在项目模型上也有模型表单绑定）

我有一个选择框，其中包含选项 1. All、2. Expired 和 3.New

当我更改选择时，我希望从控制器获取新的 $items 并使用新的项目列表重新创建表单。

我正在使用 jquery 来提醒选择已更改。但我无法弄清楚如何从 ajax 调用 myitems($filter) 并重定向以创建 items.blade 页面。

【问题讨论】：

如果使用ajax，您不想重定向吗？你想用新数据修改现有的dom吗？ $('#myitems').on('change',function() var myItems = $(this).val(); /* call ajax with your route that hits your controller which returns the data to the dom */ ).success(function(data) /* populate your list box with $.each perhaps */ ); 没有任何代码来查看路由/控制器/查看它很难给出一个具体的例子，但这些是让你到达你需要的地方的步骤，我希望他们有所帮助。

感谢您指出正确的方向，我能够根据您的方向和laravel.io thread 实现它。结果比我想象的要简单。

【参考方案1】：

路线

//Note the ? in parameter, it says parameter is optional
Route::get('/myitems/filter?', 
    ['as' => 'myitems.list', 'uses' => 'ItemController@myitems']
);

控制器

...
public function myitems(Request $request, $filter = null)

    if (empty($filter)) $filter=1;

    $items = Item::where('item_type', $filter)->get();

    // if ajax call just return the partial that displays the list
    if ($request->ajax()) 
        return view('_itemlist', compact('items'));
    

    // passed as options to input select
    $filters= [
           'All' => '0',
           'New' => '1',
           'Expired' => '2'
    ];
    return view('itempagewith_defaultitemlist', compact('items','filters'));

...

查看

查看itempagewith_defaultitemlist.blade.php

<div class="container">
!! Form::model($myitems, ['route' => 'myitems.list', 'class'=>'form-horizontal', 'files' => true]) !!

<div id="filterselectbox">
    <div class="form-group">
            !!Form::label('filterselectbox','*Filter:',['class'=>'control-label']) !!            
            !!Form::select('filterselectbox', $filters, null, ['class'=>'form-control ']) !!
     </div>
</div>
!! Form::close() !!

<div id="item-container">
    @include('_itemlist')
</div>

<script>
$('#filterselectbox').change(function() 
    var id = $('#filterselectbox').val();
    var ajaxurl = 'route('myitems', ':id')';
    ajaxurl = ajaxurl.replace(':id', id);
    $.ajax(
        url: ajaxurl,
        type: "GET",
        success: function(data)
            $data = $(data); // the html content that controller has produced
            $('#item-container').hide().html($data).fadeIn();
        
    );
);
</script>                   

</div>

局部视图_itemlist.blade.php

 <ul>
     @foreach ($items as $item)
    <li> $item->name </li>
     @endforeach
 </ul>

【讨论】：

这是迄今为止我见过的最好的自我回答问题。但我不明白你为什么将带有id=item-container 的脚本和包装div 放在_itemlist.blade.php 中。我认为您应该将代码从<ul> 到</ul> 放在_itemlist.blade.php 中，其他东西不属于那里。否则，您的 HTML 代码如下所示：<div id="item-container"><div id="item-container"><div id="item-container"><div id="item-container">....

感谢您指出这一点，我将对其进行测试并尽快更新。这是从我刚开始学习 Laravel 的时代开始的，几岁。再次感谢