Desvantagens da verificação do formulário síncrono
Ao responder à mensagem de erro, a página inteira precisa ser recarregada (embora exista um cache, o cliente ainda precisa comparar se cada arquivo tem atualizações através do protocolo HTTP para manter o arquivo atualizado)
Depois que o servidor responde incorretamente, todas as informações inseridas pelo usuário foram perdidas e o usuário precisa preenchê -lo do zero (alguns navegadores nos ajudaram a cache esses dados)
A intenção original do formulário de verificação assíncrona
Melhorar a experiência do usuário
Maximizar e reduzir solicitações de rede e reduzir a pressão do servidor
Vamos dar uma olhada em uma verificação de formulário assíncrono comum (verifique se o número de trabalho existe em segundo plano e existe como um número de trabalho válido)
Verifique o número de trabalho
A cópia do código é a seguinte:
var base_path = '$ {rc.ContextPath}';
var $ workeridInput = $ ('#workeridInput');
var $ workerderror = $ ('#workerderror');
// identifique se o número de trabalho inserido pelo usuário está correto
var isworkeridCorrect = false;
var error_worker_id_is_null = "O número de trabalho do funcionário não pode estar vazio";
var error_worker_id_is_not_correct = "Por favor, digite um número de funcionário válido";
// Mostrar mensagem de erro
Função ShowWorkerIDerror (errorMessage) {
$ workerderror.html (errorMessage);
$ workerderror.show ();
}
// Ocultar mensagem de erro
$ workeridInput.on ('keydown', function () {
$ workerderror.hide ();
});
// salve o número de trabalho que você inseriu na última vez
$ workeridInput.on ('focus', function () {
var workerId = $ .Trim ($ (this) .val ());
$ (this) .data ('antes', trabalhador);
});
// calculando quando o desfoque
$ workeridInput.on ('Blur', function () {
var workerId = $ .Trim ($ (this) .val ());
// Quando o comprimento é 0, a mensagem de erro com o número de trabalho vazia é exibida
if (! workerid.length) {
showworkerIDerRor (error_worker_id_is_null);
retornar falso;
}
// Se os dados atualmente inseridos pelo usuário forem os mesmos que os dados inseridos da última vez, a interface de fundo não será chamada
// Suponha que o usuário digite 123456 e chama a interface de fundo, e o resultado de retorno é: o número de trabalho incorreto
// Depois que o usuário altera o conteúdo de entrada, ainda é 123456, o programa de verificação não acessará a rede e exibirá diretamente a mensagem de erro
if (workerid == $ (this) .data ('antes')) {
if (! isworkeridCorrect) {
showworkerIDerror (error_worker_id_is_not_correct);
}
retornar falso;
}
// chamando a interface de fundo para verificar se esse ID do funcionário está correto
checkworkeridexists (trabalhador, function (dados) {
isworkeridCorrect = data.isworkeridexists;
if (! isworkeridCorrect) {
showworkerIDerror (error_worker_id_is_not_correct);
}
});
});
função checkworkeridexists (trabalhador, retorno de chamada) {
$ .ajax ({
URL: base_path + '/forgotpwd/checkworkeridexists.htm',
dados: {
trabalhador: trabalhador
},
Sucesso: retorno de chamada
});
}
$ workeridform.on ('submmit', function () {
// Nosso formulário pode ser enviado apenas quando o servidor retornar
if (! isworkeridCorrect) {
$ workeridInput.focus ();
retornar falso;
}
});
Depois de escrever o código acima, a verificação de uma caixa de entrada é basicamente feita.
Eu acho que há algumas coisas que afetam a experiência do usuário
A operação de retorno do carro ainda não foi suportada. Oh meu Deus, você deve ser capaz de enviar um formulário se entrar.
Se a velocidade da Internet do usuário for lenta, clique no botão Enviar, não haverá resposta, porque o ISWorkerIdCorrect será falso e será verdade apenas se a verificação do servidor for bem -sucedida.
Aqui está o código modificado:
A cópia do código é a seguinte:
var base_path = '$ {rc.ContextPath}';
var $ workeridInput = $ ('#workeridInput');
var $ workerderror = $ ('#workerderror');
// identifique se o número de trabalho inserido pelo usuário está correto
var isworkeridCorrect = false;
// Identifique o número de trabalho de verificação em segundo plano foi concluído (true: está verificando, false: a verificação não foi iniciada ou terminada)
var isworkeridloading = false;
// identifique se o usuário enviou o formulário
var IssubMit = false;
var error_worker_id_is_null = "O número de trabalho do funcionário não pode estar vazio";
var error_worker_id_is_not_correct = "Por favor, digite um número de funcionário válido";
// Mostrar mensagem de erro
Função ShowWorkerIDerror (errorMessage) {
$ workerderror.html (errorMessage);
$ workerderror.show ();
}
// Ocultar mensagem de erro
$ workeridInput.on ('keydown', function () {
$ workerderror.hide ();
});
// salve o número de trabalho que você inseriu na última vez
$ workeridInput.on ('focus', function () {
var workerId = $ .Trim ($ (this) .val ());
$ (this) .data ('antes', trabalhador);
});
// calculando quando o desfoque
$ workeridInput.on ('Blur', function () {
var workerId = $ .Trim ($ (this) .val ());
// Quando o comprimento é 0, a mensagem de erro com o número de trabalho vazia é exibida
if (! workerid.length) {
showworkerIDerRor (error_worker_id_is_null);
retornar falso;
}
// Se os dados atualmente inseridos pelo usuário forem os mesmos que os dados inseridos da última vez, a interface de fundo não será chamada
// Suponha que o usuário digite 123456 e chama a interface de fundo, e o resultado de retorno é: o número de trabalho incorreto
// Depois que o usuário altera o conteúdo de entrada, ainda é 123456, o programa de verificação não acessará a rede e exibirá diretamente a mensagem de erro
if (workerid == $ (this) .data ('antes')) {
if (! isworkeridCorrect) {
showworkerIDerror (error_worker_id_is_not_correct);
}
retornar falso;
}
// chamando a interface de fundo para verificar se esse ID do funcionário existe
checkworkeridexists (trabalhador, function (dados) {
isworkeridCorrect = data.isworkeridexists;
if (! isworkeridCorrect) {
showworkerIDerror (error_worker_id_is_not_correct);
}
});
});
função checkworkeridexists (trabalhador, retorno de chamada) {
$ .ajax ({
URL: base_path + '/forgotpwd/checkworkeridexists.htm',
dados: {
trabalhador: trabalhador
},
beforesend: function () {
// Antes de enviar a solicitação, o número de trabalho está sendo verificado.
isworkeridloading = true;
},
Sucesso: retorno de chamada,
Complete: function () {
// Depois do final, feche o logotipo
isworkeridloading = false;
// No processo de verificação em segundo plano, se o usuário enviar um formulário, ele o enviará automaticamente aqui.
if (issubmit) {
$ workerIdform.subMit ();
}
}
});
}
// enter Envie o formulário
$ workeridInput.on ('keypress', função (e) {
if (e.which === 13) {
$ (this) .blur ();
$ workerIdform.subMit ();
}
});
$ workeridform.on ('submmit', function () {
// Se o número de trabalho estiver sendo verificado em segundo plano, será identificado que o usuário enviou o formulário
if (isworkeridloading) {
issUbmit = true;
retornar falso;
}
if (! isworkeridCorrect) {
$ workeridInput.focus ();
retornar falso;
}
});
No efeito final, as duas caixas de entrada na figura são verificação assíncrona, mas o efeito parece o mesmo que síncrono.
A rede GPRRS é usada na figura para simular uma velocidade de rede lenta
Diagrama de reprodução