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

Posted 2023-03-14

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

【英文标题】：How to Load filtered data with Ajax, without reloading the whole page in laravel

【发布时间】：2015-04-03 18:30:56

【问题描述】：

我有一个应用程序，我必须根据从选择框中选择的项目过滤数据（见图）。我可以在不重新加载表单的情况下显示数据吗？ 我已经包括了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']); 

这条路线行不通。

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

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

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

【参考方案3】：

你可以使用视图制作

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

【讨论】：

我已经添加了，但同样的错误仍然存​​在。刀片中有两个 foreach 循环，它将如何在第二个重定向中工作？ @Sameer Shaikh

我已经在刀片中进行了编辑，并且我已经更新了问题。现在在这里 POST ...//localhost/lemmeknw/public/campaigns/get 已通过，但视图没有变化，它在浏览器控制台中显示 404 错误。