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

JavaScript ES6 Orientação a Objetos Aula 4 - Ex: 3 - Servidor Recebe POST vazio.

Olá, fiz o exercício normalmente e os dados estão ok, no lado do cliente, mas por algum motivo chegam vazios no server e com isso acontece uma excessão na hora de converter a data.

Seguem os códigos:

Post HTML

<html>
<head>
    <meta charset="UTF-8">
    <title>Negociações</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>

<body class="container">
    <form class="form">

        <div class="form-group">
            <label for="data">Data</label>
            <input type="date" id="data" class="form-control" required autofocus/>        
        </div>    

        <div class="form-group">
            <label for="quantidade">Quantidade</label>
            <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required/>
        </div>

        <div class="form-group">
            <label for="valor">Valor</label>
            <input id="valor" type="number" class="form-control"  min="0.01" step="0.01" value="0.0" required />
        </div>

        <button class="btn btn-primary" type="submit" onclick="sendPost(event)">Enviar dados para servidor</button>
    </form>

    <script>

        function sendPost(event) {

            event.preventDefault();
            console.log("Enviando post");

            let $ = document.querySelector.bind(document);
            let inputQuantidade = $("#quantidade");
            let inputData = $("#data");
            let inputValor = $("#valor");

            let negociacao = {
                data : inputData.value,
                quantidade : inputQuantidade.value,
                valor : inputValor.value
            }

            let xhr = new XMLHttpRequest();

            xhr.open("POST", "/negociacoes", true);
            xhr.setRequestHeader("Context-type", "application/json");

            xhr.onreadystatechange = () => {

                if (xhr.readyState == 4) {

                    if (xhr.status == 200) {
                        inputData.value = '';
                        inputQuantidade.value = 1;
                        inputValor.value = 0.0;
                        inputData.focus();
                        alert('Negociação enviada com sucesso');
                    } else {
                        alert(`Não foi possível enviar a negociação: ${xhr.responseText}`);
                    }
                }
            }

            //console.log(JSON.stringify(negociacao));

            xhr.send(JSON.stringify(negociacao));

        }
    </script>
</body>
</html>

Console do Chrome

post.html:35 Enviando post

//Reapre que o dados estão sendo lidos normalmente.
post.html:69 {"data":"2016-03-23","quantidade":"10","valor":"100"}

post.html:71 POST http://localhost:3000/negociacoes 500 (Internal Server Error)sendPost @ post.html:71onclick @ post.html:27
post.html:71 XHR finished loading: POST "http://localhost:3000/negociacoes".sendPost @ post.html:71onclick @ post.html:27

Console do Server

// Há um console.log aqui no server e repare que os dados chegam vazio lá.
{}

TypeError: Cannot read property 'replace' of undefined
    at api.cadastraNegociacao (/Users/mac/dev/JavaScript/aluraframe/server/app/api/index.js:53:42)
    at Layer.handle [as handle_request] (/Users/mac/dev/JavaScript/aluraframe/server/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/mac/dev/JavaScript/aluraframe/server/node_modules/express/lib/router/route.js:131:13)
    at Route.dispatch (/Users/mac/dev/JavaScript/aluraframe/server/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Users/mac/dev/JavaScript/aluraframe/server/node_modules/express/lib/router/layer.js:95:5)
    at /Users/mac/dev/JavaScript/aluraframe/server/node_modules/express/lib/router/index.js:277:22
    at Function.process_params (/Users/mac/dev/JavaScript/aluraframe/server/node_modules/express/lib/router/index.js:330:12)
    at next (/Users/mac/dev/JavaScript/aluraframe/server/node_modules/express/lib/router/index.js:271:10)
    at /Users/mac/dev/JavaScript/aluraframe/server/config/express.js:17:3
    at Layer.handle [as handle_request] (/Users/mac/dev/JavaScript/aluraframe/server/node_modules/express/lib/router/layer.js:95:5)

Não tenho ideia do que está errado, se alguém puder me dar uma luz.

7 respostas

Não estou em minha máquina agora. Mas verifico para você assim que estiver com ela.

Ok, fico no aguardo.

solução!

Oi Silvio, acabou que nem precisei do meu computador. O problema é que você esta escrevendo erradamente o header da requisição. Veja como esta:

xhr.setRequestHeader("Context-type", "application/json");

Você escreveu Context, o correto é Content. Isso fez com que o servidor, a API do curso não entendesse que o valor enviado é um JSON.

Acontece, sucesso e bom estudo!

Rapaz, essa é difícil de ler mesmo. Não sei o que eu tinha na cabeça quando escrevi context. Obrigado!

Beleza. Esse erro foi legal, porque mostra que se o header não tiver sido passado, o servidor que espera receber um JSON não entende que o dado enviado é um JSON.

Sucesso e bom estudo Sílvio!

Olá Flávio,

Esse erro ocorreu porque muito provavelmente, o Silvio, copiou o colou da descrição do exercício.

Na descrição do exercício está errado. Sugiro corrigir.

Até mais. :)

Não é que estava mesmo? Acabei de corrigir. Obrigado Silvio!