AJAX経由で別のPHPオブジェクトを読み込み

Question

私はCodeIgniterで作業しています。コントローラに作成されたビューを持っていますので、私にはたくさんの空きがあります。私の見解で 動的なコードは次のようになります。何のフィルタがまだ選択されていないので、

<div class="row vacancy-grid"> 
    <?php 
    foreach ($vacancies as $vacancy) { 
    ?> 
     <div class="col-lg-3 vacancy-item"> 
      <div class="vacancy-header"> 
       <img src="<?php 
        if (isset($vacancy[0]->banner)) { 
         echo base_url() . VACANCY_IMAGES . $vacancy[0]->banner; 
        }else { 
         echo base_url() . IMAGES_BASE . "noimage.png"; 
        } 
       ?>" alt="Logo Lochtfest" /> 
      </div> 
      <div class="vacancy-info"> 
       <h2><?php echo $vacancy[0]->name; ?></h2> 
       <?php 
       if (!empty($vacancy[1])) { 
       ?> 
        <ul class="list-interests"> 
         <?php 
         foreach ($vacancy[1] as $interest) { 
         ?> 
          <li><?php echo $interest; ?></li> 
         <?php 
         } 
         ?> 
        </ul> 
       <?php 
       } 
       if (!empty($vacancy[2])) { 
        ?> 
        <ul class="list-skills"> 
         <?php 
         foreach ($vacancy[2] as $skill) { 
          ?> 
          <li><i class="fa fa-check"></i><?php echo $skill; ?></li> 
          <?php 
         } 
         ?> 
        </ul> 
        <?php 
       } 
       ?> 
       <ul class="list-logistics"> 
        <li> 
         <i class="fa fa-map-marker"></i> 
         <?php echo $vacancy[0]->address_line_1; ?> <br /> 
         <?php echo $vacancy[0]->address_postal_code . ", " . $vacancy[0]->address_city; ?> 
        </li> 
        <li class="bold-sm"><i class="fa fa-calendar"></i> <?php echo $vacancy[3]; ?></li> 
       </ul> 
       <ul class="list-type"> 
        <?php 
        if ($vacancy[0]->occupancy_kind == 1) { 
        ?> 
         <li><img src="<?php echo base_url(); ?>design/img/individueel-grey.svg" alt="Individu" /></li> 
        <?php 
        } else if ($vacancy[0]->occupancy_kind == 2) { 
        ?> 
         <li><img src="<?php echo base_url(); ?>design/img/groepen-grey.svg" alt="Groepen" /></li> 
        <?php 
        } else { 
        ?> 
         <li><img src="<?php echo base_url(); ?>design/img/individueel-grey.svg" alt="Individu" /></li> 
         <li><img src="<?php echo base_url(); ?>design/img/groepen-grey.svg" alt="Groepen" /></li> 
        <?php 
        } 
        ?> 
       </ul> 
      </div> 
     </div> 
    <?php 
    } 
    ?> 
</div> 

まず$空孔がすべての欠員が含まれます。 私は、ユーザーが使用できるようにするフィルタをいくつか持っています。 私の問題は、ページを更新しなくても、このコンテンツをすべて同じ場所に読み込む方法です。私はページリフレッシュでそれを行うことができましたが、私はそれがなくてもいいと思います。 私のJSコードは次のようになります。

//This is for the filters in the vacancy overview page 
filteredVacancies = $('#filterbtn'), 
    ajaxOptions4 = { 
     type: 'POST', 
     url: "http://localhost/codeigniter/codeigniter/dashboard/vacancy/vacancyFiltering", 
     dataType: 'json' 
    }; 

filteredVacancies.click(function (ev) { 
    var options4 = $.extend({}, ajaxOptions4, { 
     data: { 
      "datefrom": $('#date-from').datepicker('getDate'), 
      "dateto": $('#date-to').datepicker('getDate') 
     } 
    }); 
    ev.preventDefault(); 

    // ajax done & fail 
    $.ajax(options4).done(function (data) { 
     if (data.result === 'success') { 
      //TODO: how to do this??? 
     } 
    }).fail(function (xhr, status, error) { 
     console.warn(xhr); 
     console.warn(status); 
     console.warn(error); 
    }); 
}); 

Answer 1

はここで何ができるかです。

1. を使用してDOM要素からテンプレートを作成します。 foreach内のコード。
2. ここで、成功ブロック内で、AJAX呼び出しから受け取ったJSONデータに基づいてこれらの要素を解析できます。あなたが達成しようとしている何のため

Answer 2

ベストプラクティスは以下の通りです：

1. あなたはあなたのデータをフィルタリングするため、いくつかのパラメータを取りますcontrollerでfunction()を持つことになります。
2. そのパラメータが設定されているなら、あなたはそのフィルタパラメータを設定するか、allと呼ばれるものに設定されていない場合、あなたが完全なデータを返す必要がフィルタリングされたデータ
3. を返却する必要があります。

このように、すべてのフィルタシナリオを処理できます。

擬似コードは、この

function get_vacancies($filter="") 
{ 
    if($filter=="") 
     // Return all vacancies 
    else 
    // Return filtered vacancies 
} 

のようになります