我尝试使用选择框过滤视图中的数据。我正在使用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>
我只是不知道如何在我的视图中显示结果。
由于您正在使用Codeigniter，我将使用不同的方法。这种方法将允许您在视图目录下的模板中单独修改html。
基本上，我们将构建三种函数方法。第一种方法products()负责初始页面，它将从模型中检索所有产品，然后将产品发送到第二种方法buildProdHTML($prods)，以将数据构建为html，最后将html发送到视图view.php，其中存在select下拉列表和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>
views/templates/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 } ?>
希望这能有所帮助。如果你有任何问题，请告诉我。
首先你应该这样计算你的物品：
<?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);
});
//。。。