如何使用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>

你能来聊天。我想解决你的问题，但我需要更多关于你工作的信息。点击链接http://chat.*.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 
});

希望这将解决您的问题

这非常有帮助，但为什么JavaScript没有缩进？我打算+1，但这不是教好的做法！ – halfer

@halfer我在chat.*.webpage中解决了这个问题。所以我直接从那里粘贴代码。这就是为什么我不缩进代码。希望你知道，在聊天代码格式化将被删除，内容将重新排列到相同的路线。我同意你所说的。现在我纠正代码。 –

我不同意这是粘贴它的原因_here_，但谢谢你修复它。 – halfer

答

为什么删除，更新后无法使用重定向到该页面，添加。

与路线：

$路线[ '温度'] = '控制器/功能';

redirect（base_url（'temp'））;

而不路线：

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

如何使用CodeIgniter添加AJAX来从数据库加载我的数据

相关推荐