Vanilla Javascript - #32 Ajax com NodeJS II

05/07/2019

Nessa segunda aula da utilização do ajax com NodeJS trabalharemos com o método post. Para tanto, setaremos e enviaremos os parâmetros.

Criar o formulário no HTML

Primeiramente vamos criar o formulário no HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Ajax com NodeJS</title>
</head>
<body>
    <form name="form1" id="form1" method="post" action="http://localhost:3000">
        <div class="response"></div>
        <input type="text" name="name" id="name" placeholder="Write your name:"><br>
        <button type="submit">Send</button>
    </form>

    <script src="javascript.js"></script>
</body>
</html>

Javascript lado cliente

No lado cliente faremos o envio dos parâmetros dos dados vindos do formulário:

(function readyJS(win,doc){
    'use strict';

    let form1=doc.querySelector('#form1');
    let name=doc.querySelector('#name');
    let response=doc.querySelector('.response');

    //Send form to node js
    function sendForm(event){
        event.preventDefault();
        let ajax=new XMLHttpRequest();
        let params='name='+name.value;
        ajax.open('POST','http://localhost:3000');
        ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        ajax.onreadystatechange=function(){
            if(ajax.status === 200 && ajax.readyState===4){
                let arr=JSON.parse(ajax.responseText);
                response.innerHTML="O usuário "+arr.name+" possui "+arr.age+" anos de idade.";
            }
        };
        ajax.send(params);
    }
    form1.addEventListener('submit',sendForm,false);
})(window,document);

Javascipt no lado servidor

No lado servidor efetuaremos a requisição, no caso o recebimento de um post e a resposta.

//Variables & constants
'use strict';

const express=require('express');
const bodyParser=require('body-parser');
const cors=require('cors');

let app=express();
app.use(cors());
let urlencodedParser=bodyParser.urlencoded({extended:false});

app.post('/',urlencodedParser,function(req,res){
    let obj={
        name: req.body.name,
        age: 26
    };
    res.json(obj);
});

let port=3000 || process.env.PORT;
app.listen(port);

Sucesso nos códigos e na vida!

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Vanilla Javascript - #31 Ajax com NodeJS

No tutorial de hoje trabalharemos o ajax com o NodeJS, ou seja, trabalharemos com Javascript tanto no lado frontend quanto no lado backend.

Vanilla Javascript - #33 Progress Bar e Outras Propriedades Ajax

Nessa vídeo aula veremos algumas outras propriedades interessantes do ajax e como exemplo faremos uma progress bar.

Javascript

Ensinaremos durante as aulas a codificação desta importante linguagem de programação.