Eu queria entender as tecnologias relacionadas a Ajax e Cookie desde que era profissional, até concluir o projeto de desenvolvimento, e finalmente entendi. Escrevi este artigo como um registro, e também pode ser usado como um entendimento simples para iniciantes .
Primeiro, vamos dar uma olhada no formulário de formulário da página de front-end:
<div class="form-signin text-center">
<h2 class="form-signin-heading">请登录</h2>
<label for="inputUserName" class="sr-only">用户名</label>
<input type="email" id="inputUserName" class="form-control s-margin-2" placeholder="用户名" required autofocus>
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" class="form-control s-margin-1" placeholder="密码" required>
<button class="btn btn-lg btn-primary btn-block s-margin-2" onclick="userLogin()">登录</button>
<button class="btn btn-lg btn-default btn-block s-margin-2" onclick="toRegister()">注册</button>
</div >
Abaixo segue o código JS:
function userLogin() {
var user = {
};
user.userName = document.getElementById("inputUserName").value;
user.userPassword = document.getElementById("inputPassword").value;
var response;
$.ajax({
async : false,//发送同步请求
type : 'POST', //请求方式为post
url : address+"userLogin", //发送请求的地址。
data : user, //发送到服务器的数据
dataType : 'json',//预期服务器返回的数据类型
success : function(result) {
response = result;
},
error : function(result) {
alert('服务器异常');
}
});
if(response.status == "0"){
setCookie("user",response.content,1);
window.location.href=address+"words.html";
}
else{
alert(response.content);
}
}
A função que queremos concluir é verificar o formulário de login através do Ajax e definir o cookie.
Abaixo, usamos o texto azul para registrar todo o processo de execução do código 1. Ao clicar no botão de login, acione a função 2. Execute a função em JS 3. Obtenha o nome de usuário, os dados inseridos na senha são armazenados na variável do usuário 4. Ajax é executado para interação front-end
"userLogin()""userLogin()"
O seguinte apresenta os parâmetros comuns do ajax
1. url : parâmetro do tipo String, (o padrão é o endereço da página atual) o endereço para onde a solicitação é enviada.
2.type : Parâmetro do tipo String, o método de solicitação (post ou get) assume como padrão get. : você pode usar outros métodos de solicitação http, como put e delete, mas apenas alguns navegadores o suportam.
3.timeout : : Parâmetro do tipo numérico, defina o tempo limite da solicitação (milissegundos)
4. async : parâmetro do tipo booleano, a configuração padrão é true: todas as solicitações são assíncronas, ou seja, ao mesmo tempo que as solicitações de dados, outras instruções de código também podem ser executadas de forma síncrona. false: Para enviar solicitações síncronas, elas devem ser executado um por um. O código anterior não acabou, o código por trás está em um estado de bloqueio
5.cache : Parâmetro de tipo booleano, o padrão é true (quando o dataType é script, o padrão é false): Se definido como false, as informações da solicitação não serão carregadas do cache do navegador.
6.data : Parâmetro do tipo Objeto ou String, os dados enviados ao servidor: Se não for uma string, será automaticamente convertido para um formato de string. A solicitação get será anexada ao url: o
objeto deve estar no formato de chave/valor, por exemplo, {k1:"v1",k2:"v2"} é convertido em &k1=v1&k2=v2. Se for um array, o JQuery atribuirá automaticamente valores diferentes ao mesmo nome. Por exemplo, {v:["k1","k2"]} se traduz em &k=v1&k=v2.7. dataType : parâmetro do tipo String, tipo de dado esperado retornado pelo servidor.
1) xml: Retorna um documento XML, que pode ser processado por JQuery.
2) script: retorna o código JavaScript em texto simples. Os resultados não são armazenados em cache automaticamente. A menos que o parâmetro de cache esteja definido. Observe que ao fazer solicitações remotas (não sob o mesmo domínio), todas as solicitações de postagem serão convertidas para obter solicitações.
3) json: retorna dados JSON. : ·
4) jsonp: formato JSONP. Ao chamar uma função no formato SONP, como myurl?callback=?, o JQuery substituirá automaticamente o último "?" pelo nome correto da função para executar a função de retorno de chamada.
5) text: retorna uma string de texto simples.
6) html: retorna informações HTML em texto simples; a tag de script incluída será executada quando inserida no DOM. : :
Se não for especificado, o JQuery retornará automaticamente responseXML ou responseText de acordo com as informações mime do pacote http e as passará como um parâmetro de função de retorno de chamada.8.beforeSend : Requer um parâmetro do tipo Function, que pode modificar a função do objeto XMLHttpRequest antes de enviar a solicitação, como adicionar um cabeçalho HTTP personalizado. Se você retornar false em beforeSend, poderá cancelar essa solicitação ajax. O objeto XMLHttpRequest é o único parâmetro.
function(XMLHttpRequest){ this; //O parâmetro options passado ao chamar esta requisição ajax
}9.complete : O parâmetro deve ser do tipo Function e a função de retorno de chamada deve ser chamada após a conclusão da solicitação (chamada quando a solicitação é bem-sucedida ou falha). Parâmetros: objeto XMLHttpRequest e uma string descrevendo o tipo de solicitação bem-sucedida.
function(XMLHttpRequest, textStatus){ this; //O parâmetro options passado ao chamar esta requisição ajax }10.success : O parâmetro deve ser do tipo Function e a função callback chamada após a solicitação ser bem-sucedida.Existem dois parâmetros.
(1) Os dados retornados pelo servidor e processados de acordo com o parâmetro dataType.
(2) Uma string descrevendo o estado.
function(data, textStatus){ //os dados podem ser xmlDoc, jsonObj, html, text, etc. this; //o parâmetro options passado ao chamar esta requisição ajax }11.error : Requer um parâmetro do tipo Função, a função a ser chamada quando a requisição falha. Esta função possui 3 parâmetros, a saber, objeto XMLHttpRequest, mensagem de erro, objeto de erro capturado (opcional). A função do evento ajax é a seguinte:
function(XMLHttpRequest, textStatus, errorThrown){ //Geralmente apenas um entre textStatus e errorThrown contém informações this; //O parâmetro options passado ao chamar esta solicitação ajax }12.contentType: O parâmetro deve ser do tipo String. Ao enviar informações para o servidor, o tipo de codificação de conteúdo padrão é "application/x-www-form-urlencoded". Esse valor padrão é adequado para a maioria dos aplicativos.
Vamos olhar para baixo, vamos olhar primeiro para o código e, em seguida, veja as etapas para analisar
UserController.java
/**
* 用户登录
* @param userName
* @param userPassword
* @return
*/
@PostMapping(value = "/userLogin")
public Response userLogin(@RequestParam("userName")String userName,
@RequestParam("userPassword")String userPassword){
return userService.userLogin(userName,userPassword);
}
}
6. O backend urcorresponde ao caminho correspondente de acordo com o caminho l. Controller
7. Insira o método e o parâmetro userLoginrecebe o valor passado por ajax .UserService中userLoginUserServiceImpl
Serviço de usuário:
import com.leaveword.utils.Response;
public interface UserService {
Response getUser(Integer userId);
Response userRegister(String userName,String userPassword);
Response userLogin(String userName,String userPassword);
}
Mostrar código UserServiceImpl:
@Override
public Response userLogin(String userName, String userPassword) {
//判断是否输入
if(CommonTools.isEmpty(userName))
return new Response("-1","用户名不能为空");
if(CommonTools.isEmpty(userPassword))
return new Response("-1","用户密码不能为空");
//判断数据库是否存在
User user = userRepository.findByUserName(userName);
if(user != null){
if(user.getUserPassword().equals(userPassword)) {
user.setUserPassword("");
return new Response("0", JSON.toJSONString(user));
}
else
return new Response("-1","密码错误");
}
else
return new Response("-1","用户不存在");
}
9. Por meio CommonToolsdo método na classe isEmpty, determine se a caixa de entrada é de entrada
lembre-se aqui, se a consulta for bem-sucedida, há dois parâmetros na resposta, o primeiro recebe 0 e o segundo recebe os dados JSON convertidos pelo usuário
Mostrar código do CommonTools:
import java.sql.Timestamp;
public class CommonTools {
public static boolean isEmpty(String str){
if(str == null)
return true;
if(str.isEmpty())
return true;
if(str == "" || str.equals(""))
return true;
return false;
}
public static Timestamp getCurrentTime(){
return new Timestamp(System.currentTimeMillis());
}
}
10. Em seguida, userRepositoryconsulte o banco de dados se existe o nome de usuário e a senha
UserRepository passados da página:
import org.springframework.data.jpa.repository.JpaRepository;
public interface UserRepository extends JpaRepository<User,Integer> {
User findByUserName(String userName);
}
11. Retorne o resultado para uma variável Responsedo tiporesponse
Resposta:
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Response {
private String status;
private Object content;
}
Perceber: A variável de resposta agora obteve dois valores, 标识符：statuse 内容：content, retorna a variável de Service e Controller por sua vez, e finalmente responde ao front-end Ajax.
12. A página de front-end Ajax obtém o resultado através do resultado,
se a requisição for bem-sucedido, atribua-o a success : function(result)in resulte atribua-o ao front end responseVariáveis
Se a solicitação falhar, uma caixa de prompt aparecerá alert('服务器异常'), indicando que o servidor está anormal
Vamos explicar como configurar cookies
Vamos colocar o código para configurar cookies no código js do front-end.
if(response.status == "0"){
setCookie("user",response.content,1);
window.location.href=address+"words.html";
}
else{
alert(response.content);
}
Sabemos que se a solicitação de postagem em ajax for bem-sucedida, duas variáveis serão trazidas para a resposta e o sucesso será
13. Para determinar response.statusse é 0
, se não for 0, coloque content-o na caixa de prompt e exiba-o.
Se for 0, representa a requisição que deu certo, então chame o setCookie（）método
setCookie() em util.js e defina o método específico em util.js. O código de util.js é mostrado abaixo.
function setCookie(name, value, days) {
var d = new Date;
d.setTime(d.getTime() + 24*60*60*1000*days);//设置Cookie保存的时间
window.document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
var strCookie=window.document.cookie;
alert("function setCookie里"+strCookie);//弹窗提示
}
14. Chame setCookie() para atribuir
os seguintes parâmetros de cookies comuns
1.name : parâmetro obrigatório, este é o nome da variável do cookie
2.value : parâmetro opcional, o valor desta variável do cookie
3.expire : parâmetro opcional, é usado para definir a hora em que a variável do cookie é salva. 1) O tempo economizado pela variável cookie é o timestamp UNIX menos o timestamp UNIX atual. (Timestamp UNIX: é o número de segundos decorridos desde 1º de janeiro de 1970 (meia-noite em UTC/GMT).
2) Obtenha o timestamp UNIX atual através da função time(), mais o tempo que queremos salvar (em segundos) Ex:setcookie("user", "Big Fish Sea", time()+3600), para que possamos salve a variável do cookie do usuário por 3600 segundos
3) Exclua a variável do cookie definindo o timestamp menor que o timestamp atual, Ex:setcookie("user","big fish sea",time()-1 ) para que excluamos o variável de cookie do usuário.
4.path : O intervalo válido do cookie.
1) Este parâmetro é o intervalo válido baseado no próximo domínio de parâmetro. Se o caminho estiver definido como "/", ele é válido em todo o domínio, Ex:setcookie("user","big fish sea",time() +3600 ,"/"), para que qualquer diretório e qualquer arquivo sob nosso domínio possa chamar o valor desta variável de cookie.
2) Se o caminho for definido como "/test", então somente o diretório /test e os subdiretórios sob o domínio serão válidos. Por exemplo, existem dois diretórios sob o domínio: test1, test2, definimos como setcookie("user ", "peixe grande" Hai,time()+3600,"/test1"), então o valor da variável cookie do usuário só pode ser chamado no diretório test1, mas não no diretório test2.
5.domain : O nome de domínio do cookie é válido. Se o domínio for definido como dayuhai.cn, todos os subdomínios em dayuhai.cn serão válidos. Por exemplo:dayuhai.n tem dois subdomínios, java.dayuhai.cn, css.dayuhai.cn, definimos como setcookie("user","big fish sea",time()+3600,"/","java. dayuhai.cn”), então o valor da variável cookie do usuário só pode ser obtido sob o subdomínio de java.dayuhai.cn.
6.secure : Defina se o cookie passa apenas por https seguro, o valor é 0 ou 1, se o valor é 1 , o cookie é válido apenas em conexões https, o valor padrão é 0, o que significa que os cookies são válidos em conexões http e https.
A seguir, explicamos em detalhes o significado do código na função setCookie().
d.setTime(d.getTime() + 24 60 60 1000 dias):
- d. getTime(): obtém o tempo em milissegundos no ponto de tempo d (ou seja, o número de milissegundos decorridos de 0:0:00:00 em 1º de janeiro de 1970 até o ponto de tempo d, o computador geralmente define 1970 janeiro 1º, 0:00:00 é a hora inicial)
24 60 60 1000 dias : 24 (24 horas por dia) * 60 (uma hora e 60 minutos) * 60 (um minuto e 60 segundos) * 1000 (um segundo 1000 milissegundos) * days obtém o número de milissegundos correspondente a days. - d.setTime(d.getTime() + 24 60 60 1000 days) : Adicione o número de milissegundos correspondente à data de expiração e, em seguida, use o método d.setTime() para atribuí-lo ao objeto d.
Aqui guardamos o cookie por 1 dia
window.document.cookie = nome + “=” + valor + “;path=/;expires=" + d.toGMTString()
- d.toGMTString(): Indica que a data será convertida do fuso horário local para o fuso horário GMT antes de ser convertida em uma string.
window.document.cookie = significa atribuir um valor a um cookie. Que tipo de valor é atribuído? É válido para todos os subdomínios do nome de domínio, o tempo de armazenamento é de 1 dia e o formato é o valor de "nome=valor".
Vamos colocar o código JS do front-end para uma melhor explicação
if(response.status == "0"){
setCookie("user",response.content,1);
window.location.href=address+"words.html";
}
else{
alert(response.content);
}
15. Depois de definir o cookie, a página saltará para completar a função de login
Resumo:
1. Ajax request: envie os dados para o back-end através dos parâmetros definidos pelo ajax, complete a verificação na função correspondente e retorne o resultado para o front-end para obter feedback
2. Set Cookie: Quando a verificação do login for concluído, chame o método setCookie(), definido de acordo com os parâmetros de condição correspondentes do cookie
