使用ajax和codeigniter從數據庫中檢索信息並將其返回

Question

我有一個顯示產品的網站，當您單擊產品時，您會獲得產品詳細信息。 現在，每個產品都有幾種不同的模型，所有模型都存儲在數據庫中。 因此，當您在選擇框中選擇一個選項時，所有產品詳細信息都必須更改為相應的型號。 問題是當我返回我的數據時，它會變得混亂，因為它再次加載了視圖。 我只希望您選擇的內容動態變化。

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();

}

阿賈克斯

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

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

Answer 1

不知道“搞砸了”背后的錯誤是什么，這使得很難確切地知道問題是什么...但是，乍看之下，您的javascript函數是不正確的。

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

data選項可以包含格式為key1 = value1＆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
});

希望有幫助...

編輯

首先，使用return 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
}
?>