我想向我的用户展示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的新手所以请原谅。帮助将得到我的真正赞赏。感谢。