從codeigniter中的數據庫獲取數據，無需刷新頁面

Question

我是codeigniter的新手我試圖從數據庫中獲取按日期過濾的數據，並通過ajax將其顯示在我的視圖頁面中，而無需刷新我的頁面。 我嘗試了很多，但沒有得到解決方案。

這裏是我的控制器：

public function sohan_by_date(){ 
     /* Check the validation of search by date function*/ 
     $this->form_validation->set_rules('start_date', 'Start Date', 'trim|required'); 
     $this->form_validation->set_rules('end_date', 'End Date', 'trim|required'); 

     if($this->form_validation->run()){ 
      /* display data from database from comparing the date in database*/ 
      $date1=$this->input->post('start_date'); 
      $date2=$this->input->post('end_date'); 

      $start_date=date('Y-m-d', strtotime($date1)); 
      $end_date=date('Y-m-d', strtotime($date2)); 

      $check=$this->task->get_by_date_sohan($start_date,$end_date); 
      if($check){ 
       $data['result']=$this->task->get_by_date_sohan($start_date,$end_date); 
       $this->load->view('admin/sohan_task_by_date', $data); 
       return json_encode($data); 
      } 
      else{ 
       redirect('task/sohan_task'); 
      } 
     } 
     else{ 
      redirect('task/sohan_task'); 

     } 
    } 

這裏是我的模型：

public function get_by_date_sohan($start_date,$end_date){ 
     /* This display all task of sohan from database by date*/ 
     $this->db->select('*'); 
     $this->db->from('task_form'); 
     $this->db->where('name','sohan'); 
     $this->db->where('date >= ',$start_date); 
     $this->db->where('date <= ',$end_date); 

     $query=$this->db->get(); 
     return $result=$query->result(); 

    } 

這裏是我的ajax：

<script type='text/javascript' language='javascript'> 
$('#getdata').click(function(){ 


$.ajax({ 
     type: "POST", 
     url: "<?php echo base_url();?>task/sohan_by_date", 
     dataType: "json", 
     success: function(data){ 
      debugger; 
      $('#result_table').html(data); 
      }, 
     error: function() { alert("oops..."); } 
     }); 
     }); 


</script> 

這裏是我的看法：

<div class="form-body"> 
       <div data-example-id="simple-form-inline"> 
       <?php 
        $attributes = array('class' => 'form-inline'); 
        echo form_open('', $attributes); 
       ?> 
        <div class="form-group"> 
        <input type="text" class="form-control" name="start_date" id="start_date" placeholder="Start Date" > 
        </div> 
        <div class="form-group"> 
         <input type="text" class="form-control" name="end_date" id="end_date" placeholder="End Date"> 
        </div> 
         <button type="submit" class="btn btn-default" id="getdata">Check</button> 
       <?php 
        echo form_close(); 
       ?> 
       </div> 
     </div> 
<div id='result_table'> 
<?php include('date.php');?> 
</div> 

我date.php文件是：

<table class="table table-striped table-hover table-responsive"> 
    <thead> 
    <tr class="success"> 
     <th>Name</th> 
     <th>Date</th> 
     <th>Work</th> 
     <th>Partner</th> 
     <th>Director</th> 
     <th>Time</th> 
     <th>Task</th> 
     <th>Status</th> 
    </tr> 
    </thead> 
    <tbody> 
    <?php foreach($result as $row) { ?> 
     <tr> 
     <td><?php echo $row->name;?></td> 
     <td><?php echo $row->date;?></td> 
     <td><?php echo $row->work;?></td> 
     <td><?php echo $row->partner;?></td> 
     <td><?php echo $row->director;?></td> 
     <td><?php echo $row->time;?></td> 
     <td><?php echo $row->task;?></td> 
     <td><?php echo $row->status;?></td> 
     </tr> 
    <?php } ?> 
    </tbody> 
</table> 

當我沒有任何使用AJAX和顯示視圖，則它正常工作，但網頁是refreshing.It正常讀取數據意味着我的控制，我的模型是否工作正常。但是，當我使用Ajax來顯示數據而無需刷新頁面，那麼它不能正常工作..請幫助我找到解決方案。我沒有更多的關於Ajax的知識。

Answer 1

我得到了答案，現在它的工作完美。在這裏我要分享我的答案。

這裏是jQuery的：

$('#myform').submit(function (event) { 
    dataString = $("#myform").serialize(); 
    $.ajax({ 
     type:"POST", 
     url:"<?php echo base_url(); ?>task/sohan_by_date", 
     data:dataString, 

     success:function (data) { 
      $('#task').html(data); 
     } 

    }); 
    event.preventDefault(); 
}); 

這裏是我的控制器：

public function sohan_by_date(){ 
     /* Check the validation of search by date function*/ 
     $this->form_validation->set_rules('start_date', 'Start Date', 'trim|required'); 
     $this->form_validation->set_rules('end_date', 'End Date', 'trim|required'); 

     if($this->form_validation->run()){ 
      /* display data from database from comparing the date in database*/ 
      $date1=$this->input->post('start_date'); 
      $date2=$this->input->post('end_date'); 

      $start_date=date('Y-m-d', strtotime($date1)); 
      $end_date=date('Y-m-d', strtotime($date2)); 

      $check=$this->task->get_by_date_sohan($start_date,$end_date); 
      if($check){ 
       $data['result']=$this->task->get_by_date_sohan($start_date,$end_date); 
       $this->load->view('admin/date', $data); 
       return json_encode($data); 
      } 
      else{ 
       redirect('task/sohan_task'); 
      } 
     } 
     else{ 
      redirect('task/sohan_task'); 

     } 
    } 

這裏是視圖的一種形式：

<?php 
$attributes = array('class' => 'form-inline','id'=>'myform'); 
echo form_open('', $attributes); 
?> 

我的所有細節代碼我已經解釋我的問題是否有人像這個問題卡住，請比較我的上述問題和我的這個答案。 謝謝

Answer 2

首先給你一個id屬性form.It是沒有必要的，你也可以通過class得到數據。但它可能是一個好習慣。

<?php 
$attributes = array('class' => 'form-inline','id'=>'myform'); 
echo form_open('', $attributes); 
?> 

現在在UA點擊，在阿賈克斯form.serialize方法獲取表單變量。

var str =$('#myform').serialize(); 
      $.ajax({ 
         url: '<?php echo site_url('task/sohan_by_date'); ?>', 
         async: false, 
         type: 'POST', 
         data:str, 
         dataType: 'html',      
         success: function(data) 
         { 
         alert(data); 
         }, 
         error:function(error) 
         { 
          alert(error) 
         } 
         }); 

現在改變UA控制器代碼：

if($check) 
{ 
$this->task->get_by_date_sohan($start_date,$end_date); 
} 

如果UA獲取數據的警覺陣列，使用json.stringify()提醒數據..祝您好運。