Ajax登录提交后淡出 [英] fadeOut after ajax login submission
本文介绍了Ajax登录提交后淡出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前有一个登录页面，该页面可以很好地淡入，可以在这里看到: ournewlife.com/001/login.php
I currently have a login page that fades in very nicely, it can be seen here: ournewlife.com/001/login.php
用户成功登录后，我希望它在重定向之前消失一段时间.我在以下代码中将值(7777)传递给load.fadeOut:
After a user successful logs in I would like it to fade out for a similar amount of time before redirecting. I passed a value (7777) to load.fadeOut in the following code:
$('#login').on('click', function(e) {
// Some variables
var username = $('input[name=username]').val(),
password = $('input[name=password]').val(),
csrf = $('input[name=csrf_field]').val(),
load = $('.form_loader');
feedback.slideToggle();
load.fadeIn();
// Check to see if any empty values..
// I mean c'mon.. Why disturb PHP?
if ( username === "" || password === "" || csrf === "" ) {
feedback.removeClass().addClass('alert error').text('Please enter your username and or password!').slideToggle();
load.fadeOut();
return false;
}
// Post the data and validate it.
$.ajax({
type: 'post',
url: 'process.php',
dataType: 'json',
data: {
username: username,
password: password,
csrf_field: csrf,
task: "login"
}, success: function(data) {
load.fadeOut(7777);
feedback.removeClass().addClass( (data.error === false) ? 'alert success' : 'alert error' ).html(data.message).fadeIn();
if (data.error === false) {
location.href = data.redirect;
}
}, error: function(XMLHttpRequest, textStatus, errorThrown) {
feedback.removeClass().addClass('error').text('Something went wrong. Please check the console for more information.').fadeIn();
load.fadeOut();
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
// console.log(XMLHttpRequest.responseText);
}
});
return false;
});
这里是较大代码的一部分:
Which is part of the larger code here:
jQuery.support.placeholder = (function(){
var i = document.createElement('input');
return 'placeholder' in i;
})();
$(document).ready( function() {
$("body").css("display", "none");
$("body").fadeIn(6666);
// Does it support placeholders?
if ( $.support.placeholder ) {
// Let the users know what to enter.
$('.input-block > label').hide();
}
// Global Variables
feedback = $('#feedback');
// Hide the JS message
$('.no-js').hide();
/**
* Called when the user forgets their password.
*/
$('#forgot_password').on('click', function() {
// Some variables.
var email = $('input[name=email]').val();
feedback.fadeOut();
if ( email === "" ) {
feedback.removeClass().addClass('alert error').text('Please fill out all required fields!').slideToggle();
return false;
}
$.ajax({
type: 'POST',
url: 'process.php',
dataType: 'json',
data: {
email: email,
task: 'forgot_password'
}, success: function(data) {
feedback.removeClass().addClass((data.error === true) ? 'alert error' : 'alert success').text(data.message).slideToggle();
}
});
return false;
});
$('#save_settings').on('click', function() {
feedback.fadeOut();
var allow_reg = parseInt($('#registration').val()),
location = $('#location').val();
$.post('process.php', {
allow_reg: allow_reg,
location: location,
task: 'save_settings'
}, function( data ) {
if ( data.error === false ) {
// We have no errors.
feedback.removeClass().addClass('alert success').text(data.message).slideToggle();
}
}, 'json');
return false;
});
/**
* Called when the user registers a new account.
*/
$('#register').on('click', function() {
// Some variables.
var username = $('input[name=username]').val(),
password = $('input[name=password]').val(),
email = $('input[name=email]').val(),
captcha = $('input[name=captcha]').val();
feedback.fadeOut();
// Some validation.
if ( username === "" || password === "" || email === "" || captcha === "") {
feedback.removeClass().addClass('alert error').text('Please fill out all required fields!').slideToggle();
return false;
}
$.ajax({
type: 'POST',
url: 'process.php',
dataType: 'json',
data: {
username: username,
password: password,
email: email,
captcha: captcha,
task: 'new_user'
}, success: function(data) {
feedback.removeClass().addClass((data.error === true) ? 'alert error' : 'alert success').text(data.message).slideToggle();
}
});
return false;
});
/**
* When the user clicks on the login button.
*/
$('#login').on('click', function(e) {
// Some variables
var username = $('input[name=username]').val(),
password = $('input[name=password]').val(),
csrf = $('input[name=csrf_field]').val(),
load = $('.form_loader');
feedback.slideToggle();
load.fadeIn();
// Check to see if any empty values..
// I mean c'mon.. Why disturb PHP?
if ( username === "" || password === "" || csrf === "" ) {
feedback.removeClass().addClass('alert error').text('Please enter your username and or password!').slideToggle();
load.fadeOut();
return false;
}
// Post the data and validate it.
$.ajax({
type: 'post',
url: 'process.php',
dataType: 'json',
data: {
username: username,
password: password,
csrf_field: csrf,
task: "login"
}, success: function(data) {
load.fadeOut(7777);
feedback.removeClass().addClass( (data.error === false) ? 'alert success' : 'alert error' ).html(data.message).fadeIn();
if (data.error === false) {
location.href = data.redirect;
}
}, error: function(XMLHttpRequest, textStatus, errorThrown) {
feedback.removeClass().addClass('error').text('Something went wrong. Please check the console for more information.').fadeIn();
load.fadeOut();
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
// console.log(XMLHttpRequest.responseText);
}
});
return false;
});
$('#forgot-password').on('click', function() {
// Some variables.
var forgotEmail = $('input#forgot-email').val(),
feedback = $('#feedback'),
load = $('#loading');
feedback.fadeOut();
load.fadeIn();
if (forgotEmail === "") {
load.fadeOut();
feedback.removeClass().addClass('error').text('Please enter your email so that I can work with it!').fadeIn();
return false;
}
$.ajax({
type: 'post',
url: 'process.php',
dataType: 'json',
data: {
forgotEmail: forgotEmail
}, success: function(data) {
load.fadeOut();
feedback.removeClass().addClass( (data.error === false) ? 'success' : 'error' ).text(data.message).fadeIn();
}, error: function(XMLHttpRequest, textStatus, errorThrown) {
feedback.removeClass().addClass('error').text('Something went wrong. Please check the console for more information.').fadeIn();
load.fadeOut();
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
}
});
return false;
});
/** TODO: Do this **/
$('#renew-password').on('click', function() {
var passwordOne = $('input#re-password').val(),
passwordTwo = $('input#re-password-2').val(),
emailReset = $('input#email-reset').val(),
resetCode = $('input#reset-code').val(),
feedback = $('#feedback'),
load = $('#loading');
feedback.fadeOut();
load.fadeIn();
if ( (passwordOne === "") || (passwordTwo === "") || (emailReset === "") || resetCode === "") {
load.fadeOut();
feedback.removeClass().addClass('error').text('Please enter your new password, two times!').fadeIn();
return false;
}
$.ajax({
type: 'post',
url: 'process.php',
dataType: 'json',
data: {
passwordOne: passwordOne,
passwordTwo: passwordTwo,
emailReset: emailReset,
resetCode: resetCode
}, success: function(data) {
load.fadeOut();
feedback.removeClass().addClass( (data.error === false) ? 'success' : 'error' ).text(data.message).fadeIn();
}, error: function(XMLHttpRequest, textStatus, errorThrown) {
feedback.removeClass().addClass('error').text('Something went wrong. Please check the console for more information.').fadeIn();
load.fadeOut();
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
}
});
return false;
});
});
我在其他地方搜索过，并尝试了其他解决方案，但它们没有起作用.我回到了这一点，因为它似乎是最简单，最直接的方法.如果有人对如何实现这一目标有任何想法，那就太好了！
I've searched elsewhere and attempted other solutions and they have not worked. I reverted back to this one because it seemed the simplest and most straight forward. If anyone has any idea on how to accomplish this that would be wonderful!
推荐答案
感谢您的提示.这段代码有效:
Thank you for the tips. This code worked:
success: function(data) {
if(data.error) load.fadeOut(7, function() {
feedback.removeClass().addClass('alert error').html(data.message).fadeIn();
});
else $("body").fadeOut(4444, function() {
//feedback.removeClass().addClass('alert success').html(data.message).fadeIn();
setTimeout(new Function("location.href = '" + data.redirect+ "';"));
});
这篇关于Ajax登录提交后淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
