Javascript Codeigniter表单下拉过滤器函数使用ajax，在DropdownOnChange事件中加载页面速度非常慢

我一直在onchange事件的codeigniter表单下拉列表中使用支持ajax的过滤函数。它根据所选的表单下拉值显示数据，其中

只是要加载的页面部分以及要检索的数据。启用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>

---

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

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

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

您有一个打字错误

$row>course\u sition\u id

将其更改为

$row->course\u sition\u id

您有一个打字错误

$row>course\u sition\u id

更改它若要

$row->course\u sition\u id

，您还可以参考此网站了解如何加快ajax请求。您还可以参考本网站了解如何加速ajax请求。

  <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>

     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);
    }
   }