【问题标题】:Laravel 5.1 Ajax to get html from Blade ViewLaravel 5.1 Ajax 从 Blade View 获取 html
【发布时间】: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 实现它。结果比我想象的要简单。

标签: ajax laravel


【解决方案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 中。我认为您应该将代码从&lt;ul&gt;&lt;/ul&gt; 放在_itemlist.blade.php 中,其他东西不属于那里。否则,您的 HTML 代码如下所示:&lt;div id="item-container"&gt;&lt;div id="item-container"&gt;&lt;div id="item-container"&gt;&lt;div id="item-container"&gt;....
  • 感谢您指出这一点,我将对其进行测试并尽快更新。这是从我刚开始学习 Laravel 的时代开始的,几岁。再次感谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-01-07
  • 1970-01-01
  • 2015-09-23
  • 2022-12-01
  • 2019-05-06
  • 2019-06-13
  • 2015-10-09
相关资源
最近更新 更多