如何使用CodeIgniter添加AJAX來從數據庫加載我的數據

如何添加一些ajax來加載我的視圖部分？我已經完成了刪除/添加和更新Ajax。如何使用CodeIgniter添加AJAX來從數據庫加載我的數據

現在我不知道如何加載數據而無需刷新瀏覽器。每次我做刪除/添加和更新，我需要先刷新我的瀏覽器才能看到結果。我知道它會通過從數據庫自動加載數據而不刷新瀏覽器來解決問題。

型號

public function getManufacturerRecord(){ //view data 
    $this->db->select('*') 
      ->from('manufacturer'); 
    $query = $this->db->get(); 
    return $result = $query->result(); 
}

控制器

public function manufacturer_list(){ 
    if($this->session->userdata('is_logged_in')){ 

     $result['data'] = $this->manufacturer_model->getManufacturerRecord(); 

     $this->load->view('../template/header'); 
     $this->load->view('manufacturer', $result); 
     $this->load->view('../template/footer'); 
    } else { 
     redirect('main/restricted'); 
    } 
}

查看

<div id="navscroll"> 
    <table class="table-condensed table-bordered table-striped table-hover"> 
     <thead> 
      <tr> 
       <th>ID</th> 
       <th>Manufacturer</th> 
       <th>Actions</th> 
      </tr> 
     </thead> 
     <tbody> 
      <?php if(!empty($data)): 
      foreach($data as $row) { ?> 
      <tr> 
       <td><?=$row->id;?></td> 
       <td><?=$row->brand;?></td> 
      </tr> 
      <?php } else : ?> 
      <tr>No Records Found!</tr> 
      <?php endif; ?> 
     </tbody> 
    </table> 
</div> 
</div>

來源

2017-03-06 Genina Anne Gabuten

你能來聊天。我想解決你的問題，但我需要更多關於你工作的信息。點擊鏈接http://chat.stackoverflow.com/rooms/137124/codeigniter –

嗨，我已經在聊天先生。 –

下面的代碼將幫助你理清你的問題

一些變化在查看頁面

附加表ID爲id="manu-table"和anchor()功能，取代它成爲遵循

<?=anchor("manufacturer/delete/{$row->id}","Delete", array('class'=>'btnDelete', 'data-id' => $row->id))?>

對於添加功能

更換你existion form_open()功能波紋管

<?=form_open('manufacturer/add',array('id' => 'manifu_add_form'));?>

，並提交功能如下

<?=form_button(['content'=>'Save', 'type' => 'submit', 'class'=>'btn btn-primary', 'id'=>'btnSubmit'])?>

加入阿賈克斯腳本

var site_url = "http://localhost/ci_attl/manufacturer/"; 
$("#manifu_add_form").submit(function(e){ 
    e.preventDefault(); 
    var manufacturer = $("#manufacturer").val(); 
    $.ajax({ 
     url: $(this).attr('action'), 
     method: "POST", 
     data: { manufacturer : manufacturer }, 
     success: function(data){ 
     console.log(data); 
     var obj = $.parseJSON(data); 
     if(obj.status == 'success') 
     { 
      var append = "<tr id='row-"+obj.last_id+"'><td>"+obj.last_id+"</td><td>"+manufacturer+"</td><td><a data-toggle='modal' href='#update"+obj.last_id+"'>Update</a>| <a href='"+site_url+obj.last_id+"'>Delete</a></td></tr>"; 
      console.log(append); 
      $("#manu-table tbody").append(append); 
      $('#manifu_add_form')[0].reset(); 
     } 
     $("div.result").html(obj.msg); 
     }, 
     error:function(a,b,c) 
     { 
      alert(c); 
     } 
    }); 
});

對於刪除功能

更改anchor()如下

<?=anchor("manufacturer/delete/{$row->id}","Delete", array('class'=>'btnDelete', 'data-id' => $row->id))?>

和刪除阿賈克斯遵循

$('.btnDelete').click(function(){ //delete data 
    var a_href = $(this).attr('href'); 
    var id = $(this).data('id'); 
    $.ajax({ 
     type: "GET", 
     url: a_href, 
     success: function(data){ 
      $("#row-"+id).slideUp(); 
      $("div.result").html(data); 
     }, 
     error:function(a,b,c){ 
      console.log(c); 
     } 
    }); 
    return false 
});

希望這將解決您的問題

來源

2017-03-06 15:50:32

這非常有幫助，但爲什麼JavaScript沒有縮進？我打算+1，但這不是教好的做法！ – halfer

@halfer我在chat.stackoverflow.webpage中解決了這個問題。所以我直接從那裏粘貼代碼。這就是爲什麼我不縮進代碼。希望你知道，在聊天代碼格式化將被刪除，內容將重新排列到相同的路線。我同意你所說的。現在我糾正代碼。 –

我不同意這是粘貼它的原因_here_，但謝謝你修復它。 – halfer

爲什麼刪除，更新後無法使用重定向到該頁面，添加。

與路線：

$路線[ '溫度'] = '控制器/功能';

redirect（base_url（'temp'））;

而不路線：

重定向（BASE_URL（ '控制器/功能'））;

來源

2017-03-06 14:16:39

如何使用CodeIgniter添加AJAX來從數據庫加載我的數據

回答

相關問題