使用ajax和codeigniter从数据库中检索信息并返回它

时间:2013-12-03 09:24:16

标签: php codeigniter jquery

我有一个显示产品的网站,当您点击产品时,您会获得产品详细信息。现在每个产品都有几个不同的模型都存储在数据库中。因此,当您在选择框中选择一个选项时,所有产品详细信息都必须更改为相应的模型。问题是,当我返回我的数据时,它会搞砸,因为它会再次加载视图。我只是希望记录在您选择的内容上发生动态变化。

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>

1 个答案:

答案 0 :(得分:0)

如果不知道“它搞砸了”背后的错误是什么,那么很难确切地知道问题是什么......但是,从最初的一眼看,你的javascript函数是不正确的。

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

  

data选项可以包含表单的查询字符串    key1 = value1&amp; key2 = value2 ,或 {key1:'value1'形式的对象,   key2:'value2'}

目前您正在向modellen控制器/函数发送 site/modelopties的值,因此$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
});

希望有帮助...

修改

首先,使用返回false; 更新javascript函数,因为这样可以防止在更改选择框的值时重新加载页面。

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

<强>控制器

<?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
}
?>