如何使用 Ajax 加载过滤后的数据，而无需在 laravel 中重新加载整个页面

Question

我有一个应用程序，我必须根据从选择框中选择的项目过滤数据（见图）。我可以在不重新加载表单的情况下显示数据吗？ 我已经包括了jquery。

![从选择框中选择项目对应的项目列在表格或div中][1]

路由到初始页面加载。

public function listCampaign()
{        
    $list1s = List1::orderBy('id', 'desc')->get();
    $this->layout->title = "Listing Campaigns";
    $this->layout->main = View::make('dash')->nest('content', 'campaigns.list', compact('list1s'));
    $campaigns = Campaign::orderBy('id', 'desc')->where('user_id','=',Auth::user()->id)->paginate(10);
    Session::put('slist', $list1s);
    View::share('campaigns', $campaigns);

}

在这里，我将 list1s 和活动共享到视图（它工作正常）。

我的刀片是 list.blade.php

   <h2 class="comment-listings">Campaign listings</h2><hr>
   <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
    <th>Select a List:</th>

    <th>

       <form method="post">
        <select class="form-control input" name="list1s" id="list1s" onchange="postdata()" >
        <option selected disabled>Please select one option</option>
        @foreach($list1s as $list1)

            <option value="{{$list1->id}}">{{$list1->name}}</option>
        @endforeach
        </select>
         </form> 

        </th>
  </tr>
</thead>
</table>
<table>
<thead>

<tr>
    <th>Campaign title</th>        
    <th>Status</th>
    <th>Delete</th> 
 </tr>
  </thead>
 <div id="campaign">
 <tbody>
  @foreach($campaigns as $campaign)
 <tr>
    <td>{{{$campaign->template->title}}}</td>                
    <td>

        {{Form::open(['route'=>['campaign.update',$campaign->id]])}}
        {{Form::select('status',['yes'=>'Running','no'=>'Stoped'],$campaign->running,['style'=>'margin-bottom:0','onchange'=>'submit()'])}}
        {{Form::close()}}
    </td>
    <td>{{HTML::linkRoute('campaign.delete','Delete',$campaign->id)}}  </td>

</tr>
@endforeach

</tbody>
</div>
</table>


  <script>
   function postdata(data) {
       $.post("{{ URL::to('campaigns/get') }}", { input:data }, function(returned){
       $('.campaign').html(returned);
       });
    }   
   </script>
   {{$campaigns->links()}}

在选择更改时，会调用 URL 活动/获取。

下面给出了 URL 的路由

public function getCampaigns()
{

$list1 = Input::get('input');
$campaigns = Campaign::where('list1_id','=', $list1)->paginate(10);
return View::make('campaigns.list', compact('campaigns'));

}

这里 POST ...//localhost/lemmeknw/public/campaigns/get 已通过，但视图没有变化，它在浏览器控制台中显示 404 错误。

Route::post('/campaigns/get', ['as' => 'campaign.get', 'uses' => 'CampaignController@getCampaigns']); 

这条路线行不通。

我完全错了吗？ 有什么解决办法吗？

Answer 1

正如我所读，您可以直接从方法中访问数据集合，

dd( json_decode( json_encode( Products::paginate(5) ), true) );

并访问代码返回的数组集合....这是我找到的一个很好的例子http://www.tagipuru.xyz/2016/05/17/displaying-data-using-laravel-pagination-in-the-html-table-without-page-reload/

Answer 2

我已经编辑了我的代码，并且成功了。

刀片

<h2 class="comment-listings">Campaign listings</h2><hr>
<script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
    <tr>
        <th>Select a List:</th>
        
        <th>
           <select class="form-control input" name="list1s" id="list1s" onchange="displayVals(this.value)">
            <option selected disabled>Please select a list</option>
            @foreach($list1s as $list1)
                <option value="{{$list1->id}}">{{$list1->name}}</option>
            @endforeach
            </select>
           
            </th>
      </tr>
    </thead>
</table>
    <div id="campaign">
    
    </div> 
<script>
function displayVals(data)
{
    var val = data;
    $.ajax({
    type: "POST",
    url: "get",
    data: { id : val },
        success:function(campaigns)
        {
            $("#campaign").html(campaigns);
        }
    });
}
</script>

路线

Route::any('/campaigns/get', [
    'as' => '/campaigns/get', 
    'uses' => 'CampaignController@getCampaigns'
    ]);

控制器

public function getCampaigns()
{
$list1 = Input::get('id');
$campaigns = Campaign::orderBy('id', 'desc')
->where('list1_id','=', $list1)
->where('user_id','=',Auth::user()->id)
->paginate(10);
return View::make('campaigns.ajaxShow')->with('campaigns', $campaigns);
}

我现在有一个单独的刀片 (ajaxShow) 可以在选择框中的选项更改时加载。

<table>
    <thead>
    <tr>
        <th>Campaign title</th>        
        <th>Status</th>
        <th>Delete</th> 
    </tr>
    </thead>
    <tbody>
@foreach($campaigns as $campaign)
    <tr>
        <td>{{{$campaign->template->title}}}</td>                
        <td>

            {{Form::open(['route'=>['campaign.update',$campaign->id]])}}
            {{Form::select('status',['yes'=>'Running','no'=>'Stoped'],$campaign->running,['style'=>'margin-bottom:0','onchange'=>'submit()'])}}
            {{Form::close()}}
        </td>
        <td>{{HTML::linkRoute('campaign.delete','Delete',$campaign->id)}}</td>
    </tr>
    @endforeach
</tbody>
</table>
{{$campaigns->links()}}

Answer 3

你可以使用视图制作

return View::make('Your view Path')->with('campaigns', $campaigns);