在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 的情况下正常获取数据并在视图中显示时，它工作正常但页面正在刷新。这意味着我的控制器和我的模型工作正常。但是当我使用 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

首先给ua表单一个id属性。不是必须的，你也可以通过class获取数据。但这可能是一个好习惯。

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

现在在ua点击中，通过ajax中的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);
}

如果您将警报中的数据作为数组获取，请使用json.stringify() 来提醒数据。祝您好运。