php - ajax ローダーのログインの問題

Question

ユーザーに loader.gif を表示したいと思います。ユーザーが有効なユーザー名とパスワードを入力すると、たとえば 5 秒間イメージ プログレス バーが表示されてからメイン ページにリダイレクトされます。

これは私がこれまでに試したことです：

      <script language="javascript">  
    $(document).ready(function(){  
    $("#loginForm").submit(function(){  

    $("#report").removeClass().addClass('loader').html('<img src="images/ajax-loader.gif">').fadeIn(1000);  
            $.post("checklogin.php",{ username:$('#username').val(),password:$('#password').val()},function(data){  
                if(data=='yes'){  
                    $("#report").fadeTo(200,1,function(){       
                        $(this).html('<img src="images/loader-bar.gif">').addClass('log').fadeTo(900,1,function(){          
                                document.location='main.php';  
                        });       
                    });  
                }
                else {  
                    $("#report").fadeTo(200,1,function(){        
                        $(this).html('<img src="images/icon_error.gif"> Username or password error.').addClass('error').fadeTo(900,1);  
                    });    
                }  
            });  
            return false;   
            });  
            $("#password").blur(function(){  
            $("#login_form").trigger('submit');  
        });  
    });  
    </script>  

しかし、これを CodeIgniter に準拠するように変更しようとしています。

v_login.php ビュー

           <script type="application/javascript">
    $(document).ready(function() {
      $('#submit').click(function(e) {
        var form_data = {
          username : $('.username').val(),
          password : $('.password').val() };
        e.preventDefault();
        var loader = $('<img/>', {
          'src':'assets/img/ajax-loader.gif',
          'id':'ajax-loader'
        }); 
        //loader.insertAfter($('#cancel'));




      $.ajax({ //
        url: "<?php echo site_url('login/ajax_check'); ?>",
        type: 'POST',
        async : false,
        data: form_data,
        success: function(msg) {

          $('#message').html(msg);
          if(form_data == 'unknown user'){
              $("#message").fadeTo(2000,1,function(){        
                $(this).html('<img src="assets/img/icon_error.gif"> Username or password error.').addClass('error').fadeTo(900,1);  
                });
          }


        }
      });
        return false;
      });
    });
  </script>

c_login.php コントローラー

   function ajax_check() {
            //if($this->input->post('ajax') == '1') {
            if($this->input->is_ajax_request()){
                $this->form_validation->set_rules('username', 'username', 'trim|required|xss_clean');
                $this->form_validation->set_rules('password', 'password', 'trim|required|xss_clean');
                $this->form_validation->set_message('required', 'Please fill in the fields');
                    if($this->form_validation->run() == FALSE) {
                        echo validation_errors();
                    } else {
                        $this->load->model('m_access');
                        $user = $this->m_access->check_user($this->input->post('username'),$this->input->post('password'));
                    if($user) {
                        echo 'login successful';
                        //$this->load->view('welcome');
                    } else {
                        echo 'unknown user'; //
                        //echo ' <img src="assets/img/icon_error.gif"> Username or password not valid';
                    }
                }
            }
        }

しかし、問題は、私が望むように機能していないことです。何か案は？この問題を終わらせたいと思っています。Ajax と CI は初めてなので、ご容赦ください。助けていただければ幸いです。ありがとう。