Tip:
Highlight text to annotate it
X
Então bem vindo a quinta vídeo aula
sobre o spring MVC e jQuery Ajax.
Vamos salvar mais alguns
contatos agora.
Cristiane
Soares, 34 anos.
Eu vou salvar mais alguns contatos,
por quê
vai ficar
melhor depois para a gente fazer as consultas.
Nós temos 4 contratos até aqui.
Eu vou salvar mais um.
Certo, 5 contatos. Vamos voltar para o código fonte.
E agora o que a gente vai fazer é parar a aplicação.
Vou fechar o spring-dao.
Aqui mesmo no arquivo, ...
no arquivo,
contact.jsp
A gente vai adicionar agora
um formulário para consulta.
Certo
Vamos colar
logo aqui abaixo
da tag h2 ...
Só vou formatar o código antes.
Ok!
Esse é o formulário para consulta então.
O formulário tem dois campos de input.
Para firstName e lastName, porque vamos fazer uma consulta por
nome completo.
não vou utilizar aquele método
Vamos usar também o método clearInput() do JS para limpar os campos
depois que a gente fizer a consulta, então por isso que eu coloquei aqui
firstInput e lastInput
como id.
um botão
do tipo button.
Que vai ser o nosso, ...
nosso botão que vai chamar o
jQuery.
E aqui, nessa tag div de id
theJason, vai ser onde eu vou mostrar o resultado
que a consulta era retornar.
Da mesma forma que a gente usou
aqui o contactTableResponse, que
é onde o jQuery mostra resultado, a linha da tabela adicionada.
Ou a linha adicionada a tabela.
Nessatag div eu vou mostrar o que a consulta
por parâmetro vai retornar.
Agora vamos salvar.
E lá na classe ContactDao a gente precisa implementar o método
findByName().
Eu vou excluir esse
bloco de comentários.
E agora a gente implementa
o método
findByName()
Fazendo uma chamada a factory,
depois ao método
getCurrentSession()
Vamos utilizar Criteria também
e vamos adicionar a restrição
aqui Restrictions
ponto equals
o primeiro parâmetro vai ser
o firstName
E vamos adicionar o ignoreCase()
que é um método para
ignorar se
o que foi digitado está com letra maiúscula ou minuscula.
E então não tem problema do banco não
aceitar o parâmetro.
E não levar em consideração a diferença entre maiúsculas e minusculas.
Agora aqui o lastName
também vamos usar
o ignoreCase()
E aqui eu vou retornar um único contato então, vou adicionar o método
uniqueResult()
E também é preciso fazer um cast
para transformar
o resultado em um objeto Contact.
Então a gente faz o cast aqui.
Para quem não conhece muito bem
sobre Criteria,
que é uma API de consultas do Hibernate,
firstName é
na verdade o atributo
firstName da classe Contact.
Lá na nossa entidade.
É ol próprio tributo.
E também o lastName.
Então ela vai identificar
pela classe Contact. Então se você
não colocar o nome
aqui, ou a Spring exatamente
com o que tem
lá na classe Contact, vai dar erro.
Salve essa classe.
Vamos até o controller.
E no controller a gente vai criar o método
para fazer essa consulta.
Então com este método
a URL de acesso
será um /getJSON
aqui você pode utilizar qualquer nome. Eu só estou colocando
getJSON
para ficar bem claro o que a gente vai fazer.
E agora eu
vou colocar o primeiro parâmetro
que vai ser firstName
e um segundo parâmetro
que vai ser o
lastName.
O método vai ser
do tipo GET.
Novamente a gente adiciona o @ResponseBody...
... public ...
E o método vai nos retornar
um Contact
Ele só vai buscar um contato por vez.
Chamado find
findByName()
E aqui
eu vou usar
a anotação
@Path
@PathVariable
Eu vou colocar o nome
de
first
firstName
Para identificar
que essa,
essa
anotação
é referente a esse parâmetro.
E o parâmetro será um String
também chamado de firstName
E uma segunda anotação @PathVariable
para o segundo parâmetro
que também será do tipo String.
Eu vou quebrar a linha aqui
para ficar mais organizado.
E agora a gente
precisa fazer...
vou arrumar aqui
diminuindo o tamanho do nome do parâmetro.
Vou adicionar um Contact
e pelo dao eu vou chamar o método
findByName()
onde eu passo os parâmetros first
e last, que são
estes parâmetros aqui.
No meu retorno
será o contact.
Isso pode também ser feito direto na mesma linha, se você preferir.
Vamos salvar.
Agora a gente vai até o arquivo
javascript.
Abaixo do método clearInput()
eu irei adicionar
um método
que vai fazer
o serviço Ajax para nós.
Da mesma forma que eu fiz lá em cima
eu indico que é um método jQuery
que vamos trabalhar com jQuery
nesse caso eu estou usando o click para o id button
aqui
o id button
que vai ser o botão aqui do Fetch JSON.
A gente pode mudar o texto
para
Search
ou você colocar find
ou qualquer outra coisa
não tem problema.
Eu pego
através do jQuery
os valores que estão no input.
Que no caso são o firstName
e o lastName, através...
usando o
id firstInput
que é esse aqui... e o lastInput
para capturar o conteúdo digitado,
passo
cada um para uma variável.
Adiciono o método ajax.
Aqui eu fiz
de forma que eu digo que esse metódo é do tipo GET.
A minha URL
é novamente
o nome da aplicação
o controller que eu vou acessar
e o método no controller que eu quero acessar.
Adiciona a URL
os dois parâmetros, que é o primeiro nome
e o último nome.
o tipo de todos será um JSON.
Que é
como esses dados serão enviados.
Se houver sucesso na requisição,
então esses dados
são exibidos na tela.
Eu criei aqui uma variável contact
onde eu pego o id.
Aqui ao invés
de ser result poderia ser
contact.
Não tem problema.
Eu coloquei result só para
ficar um pouco diferente.
E aí eu vou montar aqui,
como se fosse uma string
que vai ser adicionada depois na página JSP.
E aqui
no id ...
na tag de id
theJson
eu insiro o HTML.
Que será minha variável contact.
Que na verdade seria esse bloco.
E
o theJson
não é nada mais que esse div.
Então o conteúdo
da variável
através do método html
vai ser
exibido aqui dentro.
Então vou salvar e
vamos executar a aplicação
e testar
se esse método de consulta
vai funcionar.
E depois
eu tenho ainda mais um método
de também de consulta para mostrar para vocês.
Que são aquelas consultas dinâmicas,
onde nós vamos digitando no campo
o nome de alguém e vai aparecendo
todos os nomes referentes aquele pedaço da palavra que você já digitou.
Então vamos escolher aqui
um nome.
Vamos pegar, Aline
de Souza
Vamos clicar no botão find.
E está aqui!
De forma ajax.
Sem atualizar a página, ele me mostrou os dados da Aline.
ID igual a 2
O nome completo
e a idade.
Eu posso
pegar a Carla
Alves
E está aqui!
Carla Alves, ID 5
O nome completo
e a idade 34.
Então na próxima aula a gente
implementa o
o último método
de pesquisa
utilizando
o Spring MVC e o jQuery Ajax, até lá!