使用ajax和codeigniter从数据库中检索信息并返回 - retrieving information out of database with ajax and codeigniter and returning it

我有一个展示产品的网站，当你点击一个产品时，你会得到产品的详细信息。现在，每个产品都有一些不同的型号，这些型号都存储在数据库中。因此，当您在选择框中选择一个选项时，所有产品的详细信息都必须更改为相应的型号。问题是当我返回我的数据时，它会变得一团糟，因为它会再次加载视图。我只想让你选择的记录动态变化。

productdetail_view

<?php foreach($productsdetail as $row) { ?>
    <div class="container">
      <ol class="breadcrumb">
  <?php echo set_breadcrumb(); ?>
</ol>
 <div class="row">
 <div class="border clearfix">
  <div class="productContainer">
    <div class="productImg">
        <img class='voorbeeldimg' src="<?php echo base_url();?>uploads/<?php echo $row->foto;  ?>" alt="">
    </div>
    </div>
    <div class="test" id="test" style="height:200px; background-color:grey;"></div>
    <div class="productInfo">
    <h2>Nordia <?php echo $row->bestelnr; ?></h2>
    <h4><?php echo $row->naam; ?></h4>
    <p><?php echo $row->beschrijving; ?></p><br/>
        <label for="modellen">Modellen</label>
    <select  name="modellen" id="selection" class="form-control">
        <option value="600X400">600X400</option>
        <option value="700X500">700X500</option>
    </select><br/>
    <p><b>Draagvermogen:</b> <?php echo $row->draagvermogen; ?>kg</p>
    <p><b>Laadvlak:</b> <?php echo $row->laadvlak; ?>mm</p>
    <p><b>Wiel:</b> <?php echo $row->wiel; ?>mm</p>
    <p><b>Eigen gewicht:</b> <?php echo $row->gewicht; ?>kg</p>
    <p><b>Bestel nr: </b><?php echo $row->bestelnr; ?></p><br/>
    <label for="aantal">Aantal</label>
    <input type="number" class="form-control" id="aantal" placeholder="Stuks">
    <h3><?php echo $row->prijs; ?> €</h3>
    <h6>Excl 21% btw</h6>
<br/>
        <p><a href="" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-plus-sign"></span>&nbsp;Winkelwagentje</a></p>
  </div>
  </div>
  </div>
      <br/>
</div> <!-- /container -->
  <?php } ?>

控制器

function productdetail(){
        $data = array();
        $id = $this->uri->segment(5, 0);
        $data['productInfo'] = array();
        $this->load->model('Site_model');
        $title['title'] = 'Nordia - Steekkar';
        $data['productsdetail'] = $this->Site_model->get_productdetail($id);
        $this->load->view('head_view', $title);
        $this->load->view('nav_view');
        $this->load->view('productdetail_view',$data);
        $this->load->view('footer_view');
    }
    function modelopties(){
        $data = array();
        $where = array();
        $where['modellen'] = $this->input->post('modellen');
        $this->load->model('Site_model');
        $data['option'] = $this->Site_model->get_productoptions($where);
        $this->load->view('productdetail_view',$data);
    }

型号

function get_productoptions($where) {
 return $this->db->where('laadvlak')->get('tblproducts')->row();

}

ajax

<script>
    $(function(){
        $('#selection').change(function(){
             var modellen = $(this).val();
             $.ajax({
                url : 'site/modelopties',
                type : "POST",
                data : modellen,
                success : function(data){
                    $('#test').html(data);
                },
             }); 
        });
    }) 
    </script>

如果不知道"它搞砸了"背后的错误是什么，就很难确切地知道问题是什么……然而，从最初的角度来看，您的javascript函数是不正确的。

取自http://api.jquery.com/jQuery.ajax/

数据选项可以包含以下形式的查询字符串key1=value1&key2=value2或形式为的对象｛key1:"value1"，key2:"value2"｝。

此时，您只向site/modelopties控制器/函数发送modellen的值，因此$this->input->post('modellen')正在查找名为"modellen"的后数组键（显然找不到）。

我建议将您的javascript函数更改为以下内容：

$('#selection').change(function(){
    var modellen = $(this).val();
    $.ajax({
        url : 'site/modelopties',
        type : "POST",
        data : { modellen: modellen }, // or modellen=modellen
        success : function(data){
            $('#test').html(data);
        },
    }); 
    return false; // Prevents page from reloading
});

希望能有所帮助。。。

编辑

首先，用return false更新javascript函数，因为这将防止在更改选择框的值时重新加载页面。

其次，当前javascript函数将返回modelopties控制器函数（在本例中为productdetail_view）输出的任何内容。为了只返回数据库的值（而不是整个视图），您需要修改modelopties函数。我建议创建一个新视图，只显示要加载到#testdiv

控制器

<?php
function modelopties() {
    $data = array();
    $where = array();
    $where['modellen'] = $this->input->post('modellen');
    $this->load->model('Site_model');
    $data['option'] = $this->Site_model->get_productoptions($where);
    $this->load->view('productdetail_partial_view', $data); // new view file
}
?>

查看（productdetail_View_partial）

<?php
foreach ($option as $row) {
    echo $row . '<br />'; // manipulate the data however you want it to be displayed
}
?>