jquery - 如何在codeigniter中使用ajax加载页面的一部分

Question

Controller :

public function index()
{   

            //Get all data from database
    $data['products'] = $this->billing_model->get_all();
            //send all product data to "shopping_view", which fetch from database.      
    $this->load->view('shopping_view', $data);
}

      function give_more_data() 
  {
    if (isset($_POST['category'])) {
      $data['ajax_req'] = TRUE;
      $data['node_list'] = $this->billing_model-get_node_by_type($_POST['category']);
      $this->load->view('shopping_view',$data);
    }

查看:

<?php 
if (!isset($ajax_req)): ?>
<div class="show-veg"><p>View only veg</p></div>
<div class="show-drinks"><p>View only drinks</div>
      <?php endif; ?>
<div id="ajax-content-container">

    <?php foreach ($node_list as $key=>$value): 


                $id = $value['serial'];
                $name = $value['name'];
                $description = $value['description'];
                $price = $value['price'];
                ?>

                <div id='product_div'>  
                    <div id='image_div'>
                        <img src="<?php echo base_url() . $product['picture'] ?>"/>
                    </div>


                  <div id='info_product'>
                        <div id='name'><?php echo $name; ?></div>
                        <div id='desc'>  <?php echo $description; ?></div>
                        <div id='rs'><b>Price</b>:<big style="color: #E00">
                            Ksh <?php echo $price; ?></big></div>
                        <?php

                        // Create form and send values in 'shopping/add' function.
                        echo form_open('shopping/add');
                        echo form_hidden('id', $id);
                        echo form_hidden('name', $name);
                        echo form_hidden('price', $price);
                        ?> </div> 
                    <div id='add_button'>
                        <?php
                        $btn = array(
                            'class' => 'fg-button teal',
                            'value' => 'Add to Bill',
                            'name' => 'action'
                        );

                        // Submit Button.
                        echo form_submit($btn);
                        echo form_close();
                        ?>
                    </div>
                </div>

      <?php endforeach; ?>

JavaScript:

<script type="text/javascript">
$(document).ready(function () {
  ajax_vegmeals();
  ajax_nonvegmeals();
  ajax_salads();
   ajax_drinks();
});

function ajax_vegmeals() {
  $('.show-veg').click(function () {
    $.ajax({
      url: base_url+"index.php?/shopping/give_more_data",
      async: false,
      type: "POST",
      data: "type=vegmeal",
      dataType: "html",
      success: function(data) {
        $('#ajax-content-container').html(data);
      }
    })
  });

}

function ajax_nonvegmeals() {
  $('.show-nonveg').click(function () {
    $.ajax({
      url: base_url+"index.php?/shopping/give_more_data",
      async: false,
      type: "POST",
      data: "type=nonvegmeal",
      dataType: "html",
      success: function(data) {
        $('#ajax-content-container').fadeIn().html(data);
      }
    })
  });
}

function ajax_salads() {
  $('.show-salads').click(function () {
    $.ajax({
      url: base_url+"index.php?/shopping/give_more_data",
      async: false,
      type: "POST",
      data: "type=salads",
      dataType: "html",
      success: function(data) {
        $('#ajax-content-container').fadeIn().html(data);
      }
    })
  });
}

我看到了一个关于ajax的教程，我想用它根据所选类别在页面上加载产品，例如，如果您选择饮料，页面会加载饮料而不加载页面。我尝试编辑代码但没有成功。我收到错误。

请帮忙？

Answer 1

另一种方法是使用 Codeigniter 的 View 作为模板，如下所示:

型号:

class Billing_model extends CI_Model {

    function get_all() {
        $this->db->select("*");
        $this->db->from('products');
        $query = $this->db->get();
        return $query->result();
    }

    function get_node_by_type($type) {
        $this->db->select("*");
        $this->db->from('products');
        $this->db->where('type', $type);
        $query = $this->db->get();
        return $query->result();
    }

}

Controller :

class Shopping extends CI_Controller {

    function index() {
        $this->load->view('shopping_view');
    }

    function give_more_data() {
        $this->load->model('billing_model');
        $type = $this->input->post('type');
        if ($type === "All") {
            $results = $this->billing_model->get_all();
        } else {
            $results = $this->billing_model->get_node_by_type($type);
        }
        $data['node_list'] = $results;
        $filter_view = $this->load->view('templates/filter_products', $data, TRUE);

        echo json_encode($filter_view);
    }

}

查看(过滤器产品):

<?php foreach ($node_list as $key => $product) { ?>
    <div id='product_div'>  
        <div id='image_div'>
            <img src="<?= base_url() . $product->picture ?>"/>
        </div>

        <div id='info_product'>
            <div id='name'><?= $product->name ?></div>
            <div id='desc'>  <?= $product->description ?></div>
            <div id='rs'>
                <b>Price</b>:<big style="color: #E00">Ksh <?= $product->price ?></big>
            </div>
            <?php
            echo form_open('shopping/add');
            echo form_hidden('id', $product->id);
            echo form_hidden('name', $product->name);
            echo form_hidden('price', $product->price);
            ?> 
            <div id='add_button'>
                <?php
                $btn = array(
                    'class' => 'fg-button teal',
                    'value' => 'Add to Bill',
                    'name' => 'action'
                );

                echo form_submit($btn);
                ?>
            </div>
            <?php echo form_close(); ?>
        </div> 
    </div>
<?php } ?>

查看(购物 View ):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="filters">
    <label><input type="radio" name="type" value="All" checked>All</label>
    <label><input type="radio" name="type" value="veg">Veg</label>
    <label><input type="radio" name="type" value="drinks">Drinks</label>
    <label><input type="radio" name="type" value="meat">Meat</label>
</div>

<div id="ajax-content-container">
</div>

<script>
    function filter(type) {
        var url = "index.php?/shopping/give_more_data";
        var postdata = {type: type};
        $.post(url, postdata, function(data) {
            var results = JSON.parse(data);
            $('#ajax-content-container').html(results);
        });
    }

    filter("All"); //runs at load

    $('#filters input').click(function() {
        var type = $(this).val();
        filter(type);
    });
</script>