0

我想向我的用户展示一个 loader.gif。如果用户输入有效的用户名和密码，将显示一个图像进度条，比如说 5 秒，然后重定向到主页，否则，将显示 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 的新手，所以请原谅。我将非常感谢您的帮助。谢谢。

4

0 回答 0