How to send json data to codeigniter view

Hi i have a question based on how i am going to replace my web page section with the returned data from my controller. I have a page that displays the details of the movies directly from my database and i want when a user selects a specific genre then only the movies of that certain category wil be displayed. I have managed to get the name of each genre from the select box and send it to the controller were i will use it to extract the data from the database. In my html i am using a foreach loop to load ALL the data and my problem is how i will display them back to the view and manipulate my php/html code in order to display them(actually replace the existing php/html with the new as an ajax request). I know i have to use json_encode() to send them back as an object but i don't know how to display them or iterate the data in the php/html tags.

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 loop movie data

<!-- 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 -->

Controller

 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 I want the page to change the data with out reloading it, that's the reason i am trying it with ajax but i am fairly new to this and i am stuck. Any help?

You can check if ajax used post to get to your controller and then return 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');
     }
}

And then in javascript you can use $(this).val() it gets the value of changed element ( you can use this a lot ) and then if ajax call is success in div where you show your movies just append every movie with forEach loop

$(".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
             });
        }
    });
});