javascript - 使用ajax的Codeigniter表单下拉过滤功能，在下拉onchange事件中加载页面非常慢

Question

我一直在 onchange 事件的 codeigniter 表单下拉列表中使用启用 ajax 的过滤功能。它根据所选的表单下拉值显示数据，其中 <div id="ajax-content"></div>只是要与检索的数据一起加载的页面部分。支持ajax的过滤器似乎在第一个过滤器中工作正常，但是当您在第二个、第三个、第四个等等的表单下拉列表中选择值时，页面加载以及数据检索都非常慢。有没有办法提高这个支持ajax的过滤功能的加载速度和数据检索？这是我的代码

Javascript:

<script type="text/javascript">

 $('#select_id').change(function () {

document.getElementById('ajax-content').style.backgroundColor='white';
$('#ajax-content').html('<img src="<?php echo base_url()?>/img/loading7.gif"
 style="position:relative; margin:350px; margin-top:250px;" />');
var course_id = $("#select_id").val();
var postData = {'course_id':course_id};

$.ajax({
  url: "<?php echo base_url(); ?>students/get_ajax_course_student/",
  async: false,
  type: "POST",
  cache: false,
  data: postData,
  dataType: "html",
  success: function(data) {
    setTimeout(function(){
    $('#ajax-content').html(data);
    document.getElementById('ajax-content').style.backgroundColor='#f5f5f5';
    },2000);
   },
  });
});
</script>

查看:

  <div id="ajax-content">
  <?php
      $cnt=0;
   echo form_open('students/del_student/'.$tennant_id);
    foreach($data_student as $row)
    {
      $cnt++;
   echo"<input type='hidden' name='course_occasion_id' 
    value=".$row->course_occasion_id.">";
      ?>
       <address>
     <div class="row-fluid">

      <div class="span2"><input type='checkbox' name='student_id[]' value="<?php echo
      $row->id;?>"  ></div>
      <div class="span4"><?php echo anchor("students/student/
       $row->id/$tennant_id",$row->first_name);?></div>
      <div class="span4"><?php echo $row->last_name;?> </div>
      <div class="span2"><?php echo $row->status;?> </div>
     </div>
     </address>
    <?php
     }
     ?>
     <address>
      <div class="row">
        <div class="span3"><strong><?php echo $total_student;?></strong> </div>
        <div class="span2"><strong><?php if(isset($total_rows)) echo $total_rows;?>
     </strong></div>
      </div >
      <input type="hidden" name="delete_student_action" id="delete_student_action"
       value="<?php echo $delete_student_action; ?>">
      </address>
      <div class="row">
        <div class="span2"><?php echo form_submit(array('class'=>'btn btn-danger btn-
       large',"name"=>"delete","id"=>"delete","disabled"=>"true"),$btn_delete);?></div>
        <div class="span4"><?php if(isset($links)) echo $links;?></div>
      </div>

      <? echo form_close();?>
  </div>

Controller :

     function get_ajax_course_student($tennant_id='',$sort_by = 'first_name',
     $sort_order= 'asc'){
     //$data = $this->data;
     $data['fields'] = $this->fields;
     $data['sort_by']        = $sort_by;
     $data['sort_order']     = $sort_order;
     $data['tennant_id'] = $this->session->userdata('username');
     $this->load->model('ajax_student_model');
     $course_id = $this->input->post('course_id');
     $data['ajax_req'] = TRUE;
     $data['selected_value'] = "";
     $data['status_value']   = "";
     $data['date_value']     = "";
     $data['dropdown'] = $this->ajax_student_model->get_dropdown
     ($this->session->userdata('username'));
     if(isset($course_id)){
     $data['ajax_req'] = TRUE;
     $result=$this->ajax_student_model->get_occasion_id($course_id);
     if(empty($result)){
     log_message('error', 'Some variable did not contain a value.');
     }
     else{
     $students = $this->ajax_student_model->get_student($result);
     $data["data_student"] = $students['rows'];
    }
    $this->load->view('view_student',$data);
    }
   }

同时，使用console.log函数显示整个页面已在onchange事件中加载

Answer 1

考虑到使用 Ajax 传递的 HTML 内容的数量，它确实会减慢 div 内容的加载速度。加快速度的更好方法是减少使用 ajax 传递的代码数量。