Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Como fazer meu front consumir o um json enviado pelo back-end?

Boa tarde a todos, estou com uma dúvida e preciso de ajuda por favor. Estou criando uma aplicação RESTful com Spring Boot no Back-End e JQuery no front. Gostaria de saber como faço para meu front consumir um JSON. Por exemplo. Eu quero fazer um método GET e quero passar uma list para o front, até aí consegui fazer, mas como chamo o front a partir disso? Segue minha classe Rest:

@RestController
@RequestMapping("/imovel")
public class ImovelResource {

    @Autowired
    private TipoMoradiaRepository tipoMoradiaRepository;

    /*@RequestMapping("cadastrarimovel")
    public String form(Model model) {
        Iterable<TipoMoradia> tipoMoradia = tipoMoradiaRepository.findAll();
        model.addAttribute("tipoMoradia", tipoMoradia);
        return "formimovel";
    }
    Nesse caso eu estou chamando o Front e passando a list direto do 
    back-end e não é isso que eu quero*/


    @RequestMapping(value = "/cadastro", produces = MediaType.APPLICATION_JSON_VALUE, method=RequestMethod.GET)
    public Iterable<TipoMoradia> listAllTiposMoradia() {
        Iterable<TipoMoradia> tiposMoradia = tipoMoradiaRepository.findAll();
        return tiposMoradia;
    }
    /*Eu quero retornar um JSON ao fazer o método GET, mas não sei
    como chamar meu front, parei nessa parte*/
}
3 respostas

Segue meu código Front:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>SharedHome - Página Inicial</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/image-upload.css" type="text/css" media="all" />

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="js/consulta-cep.js"></script>
<script type="text/javascript" src="js/upar-imagens.js"></script>
</head>
<body>
    <div class="container">
        <h1>Cadastro de Imóvel</h1>
        <form action="" method="POST" name="form1">
            <div class="form-group">
                <!-- <input type="text" name="paginas" class="form-control"/>-->
                <label for="sel1">Tipo de Moradia</label> 
                <select class="form-control" id="sel1" name="tipomoradia">
                    <option th:each="tipoMoradia : ${tipoMoradia}" th:text="${tipoMoradia}"></option>
                </select>
            </div>
            <div class="form-group">
                <label>Descrição</label> 
                <!--<input type="text" name="paginas" class="form-control" />-->
                <textarea class="form-control" rows="5" id="comment" name="descricao"></textarea>
            </div>
            <div class="form-group">
                <label>Ponto de Referência</label> 
                <input type="text" name="paginas" class="form-control" />
            </div>

            <div class="row">
                <div class="form-group col-2">
                    <label>CEP</label> 
                    <input type="text" name="cep" class="form-control" maxlength="10" id="cep"/>
                </div>
                <div class="form-group col-4">
                    <label>Bairro</label> 
                    <input type="text" name="bairro" class="form-control" id="bairro"/>
                </div>
                <div class="form-group col-4">
                    <label>Cidade</label> 
                    <input type="text" name="cidade" class="form-control" id="cidade"/>
                </div>
                <div class="form-group col-2">
                    <label>Estado</label> 
                    <input type="text" name="uf" class="form-control" id="uf"/>
                </div>
            </div>

            <div class="row">
                <div class="form-group col-6">
                    <label>Logradouro</label> 
                    <input type="text" name="rua" class="form-control" id="rua"/>
                </div>

                <div class="form-group col-2">
                    <label>Número</label> 
                    <input type="text" name="numero" class="form-control" id="numero"/>
                </div>
            </div>

            <fieldset class="form-group">
                <a href="javascript:void(0)" onclick="$('#pro-image').click()">Adicionar Fotos</a>
                <input type="file" id="pro-image" name="pro-image" style="display: none;" class="form-control"></input>
            </fieldset>
            <div class="preview-images-zone form-group">
            </div>

            <button class="btn btn-primary" type="submit">Cadastrar Imóvel</button>
        </form>
    </div>

</body>
</html>

Antes eu estava retornando meu código HTML "direto", passava a list e o retornava, mas agora quero passar um JSON e de alguma maneira "chamar" a página no Front.

solução!

Fala ai Tiago, de boa ?

Você pode chamar o seu controller via Javascript e também vai popular a tela via js, acho que é a forma mais natural.

Caso contrário, pode até dar uma olhadinha em Angular, que faz bastante disso.