如何將json數據發送到codeigniter視圖

Question

嗨，我有一個問題，關於我將如何用我的控制器返回的數據替換我的網頁部分。 我有一個頁面可以直接從我的數據庫中顯示電影的詳細信息，我希望當用戶選擇特定類型時，只會顯示該特定類別的電影。 我已經設法從選擇框中獲取每個流派的名稱並將其發送到控制器，我將使用它從數據庫中提取數據。 在我的 html 中，我使用 foreach 循環加載所有數據，我的問題是如何將它們顯示回視圖並操作我的 php/html 代碼以顯示它們（實際上用新的替換現有的 php/html作為ajax請求）。 我知道我必須使用 json_encode() 將它們作為對象發回，但我不知道如何顯示它們或迭代 php/html 標簽中的數據。

Javascript

$(".select__sort").change(function()
    {

        var genre = $(".select__sort").val();

        $.ajax({
            type: "POST",
            url: "http://localhost:8888/Cinema_Seat_Booking_System/movie_list_full/order_by_genre",
            data: {'cat':genre},
            dataType:"json",
            cache: false,
        success: function (data) {

        }
      });
    });

HTML

  <div class="select-area">

                <form class="select select--film-category" method='get'>
                      <select name="select_item" class="select__sort" tabindex="0">
                        <option value="default" selected="selected">All</option>
                          <?php foreach($genres as $category): ?>
                          <option value="<?php echo $category->genre ?>" selected="selected"> <?php echo $category->genre ?></option>
                          <?php endforeach ?>
                    </select>
                </form>

        </div>

HTML foreach 循環電影數據

<!-- Movie preview item -->
            <?php foreach($movies_data as $movie_data) :?>
            <div class="movie movie--preview movie--full release">
                 <div class="col-sm-3 col-md-2 col-lg-2">
                        <div class="movie__images">
                            <img alt='' src=<?php echo $movie_data->path ?>>
                        </div>

                </div>

                <div class="col-sm-9 col-md-10 col-lg-10 movie__about">
                        <a href='view_movie_page_full.php' class="movie__title link--huge"><?php echo $movie_data->title ?></a>

                        <p class="movie__time"><?php echo $movie_data->duration_min ?></p>

                        <p class="movie__option"><strong>Country: </strong><a href="#"><?php echo $movie_data->country ?></a href="#"></p>
                        <p class="movie__option"><strong>Category: </strong><a href="#"><?php echo $movie_data->genre ?></a></p>
                        <p class="movie__option"><strong>Director: </strong><a href="#"><?php echo $movie_data->director ?></a></p>
                        <p class="movie__option"><strong>Actors: </strong><a href="#"><?php echo $movie_data->actors ?></a></p>

                        <div class="movie__btns">
                            <a href="<?php echo site_url('book1')?>" class="btn btn-md btn--warning">book a ticket <span class="hidden-sm">for this movie</span></a>
                        </div>

                        <div class="preview-footer">
                            <div class="movie__rate"><div class="score"></div><span class="movie__rate-number"></span> </div>


                        </div>
                </div>

                <div class="clearfix"></div>



            </div>
            <?php endforeach ?>
            <!-- end movie preview item -->

控制器

 public function order_by_genre()
{
    $this->load->model('movie_list_full_model');

    $ajax_request = $this->input->post('cat');
    $query_data['genres'] = $this->movie_list_full_model->get_all_genres($ajax_request);


    $this->load->view('templates/header');
    $this->load->view('home/view_movie_list_full', $query_data);
    $this->load->view('templates/footer_movie_list_full');

}

ps 我希望頁面在不重新加載數據的情況下更改數據，這就是我嘗試使用 ajax 的原因，但我對此很陌生，我被卡住了。 有什么幫助嗎？

Answer 1

您可以檢查 ajax 是否使用 post 到達您的控制器，然后返回 json encode

public function order_by_genre(){

$this->load->model('movie_list_full_model');
$is_post = $this->input->server('REQUEST_METHOD') == 'POST';

if($is_post){
     $ajax_request = $this->input->post('cat');

     echo json_encode( $this->movie_list_full_model->get_all_genres($ajax_request));
  }
else {
      $this->load->view('templates/header');
      $this->load->view('home/view_movie_list_full', $query_data);
      $this->load->view('templates/footer_movie_list_full');
     }
}

然后在 javascript 中，您可以使用 $(this).val() 它獲取更改元素的值（您可以經常使用它），然后如果 ajax 調用在 div 中成功，您可以在其中展示電影，只需將每部電影附加到 forEach環形

$(".select__sort").change(function()
{

    var genre = $(this).val();

    $.ajax({
        type: "POST",
        url: "http://localhost:8888/Cinema_Seat_Booking_System/movie_list_full/order_by_genre",
        data: {'cat':genre},
        dataType:"json",
        cache: false,
        success: function (data) {
          $("#movies").html(" "); //clear everything from movie div

            data.forEach(function(entry) {   
             $("#movies").append("<div>"+entry.movie+"</div>");
               //just add everything here
             });
        }
    });
});