CodeIgniter 中的 AJAX 选择过滤

Question

我尝试使用选择框过滤视图中的数据。我正在使用 CodeIgniter，我想使用 AJAX 过滤它。我已经测试了代码并查看了控制台，AJAX 帖子返回了结果。问题是，我不知道如何在我的视图中显示结果。我的意思是，我应该怎么写success: function(){}？

这是我的 AJAX 代码：

$(document).ready(function() {
    $("#selectBerdasar").change(function() {
        var key = $(this).val();
        console.log(key);
        var postdata = {key: key};
        var url = '<?php echo site_url('produk/filter/GetFilterJson');?>';
        $.post(url, postdata, function(result) {
            console.log(result);
            if (result) {
                var obj = JSON.parse(result);
                $('col-item').empty();
                $.each(obj, function(key, line) {

                });
            } else {

            }
        });
    });
});

这是我的看法：

<div class="row">
    <div class="col-md-4 pull-right">
        <select class="form-control" id="selectBerdasar">
            <!--  <option>Produk Terbaru</option>
            <option>Produk Terpopuler</option> -->
            <option value="termahal">Harga Termahal</option>
            <option value="termurah">Harga Termurah</option>
            <option value="alfabet">Alfabet A-Z</option>
        </select>
    </div>
</div>
<div class="row">
    <?php foreach ($produk as $data) {?>
        <div class="col-xs-6 col-sm-4 col-md-4">
            <div class="col-item">
                <a href="<?php echo base_url('produk/item/detail/' . $data['id_produk']);?>">
                    <div class="photo">
                        <img src="<?php echo base_url();?>asset/user/img/produk/<?php echo $data['gambar'];?>" class="img-responsive" alt="" />
                    </div>
                    <div class="info">
                        <div class="row">
                            <div class="price col-md-12">
                                <h5><?php echo $data['nama_produk'];?></h5>
                                <h5 class="price-text-color">Rp.<?=number_format($data['harga_produk'], 0, ',', '.')?></h5>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
        </div>
    <?php } ?>
</div>

我只是不知道如何在我的视图中显示结果。

Answer 1

由于您使用的是 Codeigniter，我将使用不同的方法。这种方法可以让您在views目录下的模板中单独修改html。

基本上，我们将构建三个函数方法。第一个方法products() 负责初始页面，它会从模型中检索所有产品，然后将产品发送到第二个方法buildProdHTML($prods) 以将数据构建为html，最后将html 发送到视图view.php，选择下拉列表和 jquery 所在的位置。 jquery/ajax会使用第三种方法GetFilteredProducts()；此方法将从数据库中检索过滤后的产品，构建 HTML，并将其发送回 jquery。

这就是我的意思：

控制器：

class Site extends CI_Controller {

    public function GetFilteredProducts() {
        $key = $this->input->post("key");
        $prods = $this->model_name->getProductsByKey($key);//Assuming you are using the function result();
        if ($prods) {
            $html = $this->buildProdHTML($prods);
            echo $html;
        }
    }

    private function buildProdHTML($prods) {
        $html = $this->load->view("templates/product", array("products" => $prods), TRUE);
        return $html;
    }

    public function products() {
        $prods = $this->model_name->getProducts(); //Assuming you are using the function result();
        if ($prods) {
            $html = $this->buildProdHTML($prods);
            $this->load->view("view", array('prod_html' => $html));
        }
    }
}

views/view.php

<div class="row">
    <div class="col-md-4 pull-right">
        <select class="form-control" id="selectBerdasar">
            <!--  <option>Produk Terbaru</option>
            <option>Produk Terpopuler</option> -->
            <option value="1">Harga Termahal</option>
            <option value="2">Harga Termurah</option>
            <option value="alfabet">Alfabet A-Z</option>
        </select>
    </div>
</div>
<div id="results" class="row">
    <?= $prod_html?>
</div>

<script>
    $(document).ready(function() {
        $("#selectBerdasar").change(function() {
            var postdata = { key: $(this).val() };
            var url = '<?= site_url('site/GetFilteredProducts'); ?>';
            $.post(url, postdata, function(result) {
                if (result) {
                    $('#results').html(result);
                } else {

                }
            });
        });
    });
</script>

视图/模板/product.php

<?php foreach ($products as $data) { ?>
    <div class="col-xs-6 col-sm-4 col-md-4">
        <div class="col-item">
            <a href="<?= base_url('produk/item/detail/' . $data->id_produk); ?>">
                <div class="photo">
                    <img src="<?= base_url(); ?>asset/user/img/produk/<?= $data->gambar; ?>" class="img-responsive" alt="" />
                </div>
                <div class="info">
                    <div class="row">
                        <div class="price col-md-12">
                            <h5><?= $data->nama_produk; ?></h5>
                            <h5 class="price-text-color">Rp.<?= number_format($data->harga_produk, 0, ',', '.') ?></h5>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </a>
        </div>
    </div>
<?php } ?>

希望这会有所帮助。如果您有任何问题，请告诉我。

Answer 2

首先你应该像这样计算你的项目：

<?php foreach ($produk as $KEY => $data) ?>
   <div class="col-xs-6 col-sm-4 col-md-4">
      <div id="id-<?= $KEY ?>" class="col-item">

其中 $KEY 是您的数据元素 ID（您可以使用 $data['key'] 变体

然后使用类似的东西：

// ... 
var someHtml = ''; 
obj.forEach(function(elem, index) { 
   // remember to convert data type to string
   someHtml = '<p>'+elem.some_data_to_display + '</p>'; 
   $('#id-'+elem.key).html(someHtml); 
});

// ...