Enviar formulario com ajax para backend node js

Programação
,
#1

Preciso enviar um formulario de login através do ajax para uma rota no backend de forma que não atualize a pagina.

Formulario:


  <!-- Icon -->
  <div class="fadeIn first mb-1">
    <img src="./assets/img/icon.png" id="icon" alt="User Icon" />
  </div>

  <!-- Login Form -->
  <form action="/authenticate" method="POST">
    <input type="text" class="fadeIn second" name="login" id="loginId" placeholder="login">
    <input type="text" class="fadeIn third" name="password" id="passwordId" placeholder="password">
    <input type="submit" class="fadeIn fourth" value="ACESSAR" id='login-button' >
  </form>

  <!-- Remind Passowrd -->
  <div id="formFooter">
    <a class="underlineHover" href="#">Esqueceu a senha?</a>
  </div>
</div>
  </div>

Rota backend:

    async authenticate(req, res) {
            var login = req.body.login;
            var password = req.body.password;
            var adminLogin = await LoginRepository.findLogin(login);

            if (adminLogin) {

                var passwordResult = bcrypt.compare(password, adminLogin.password);

                if (passwordResult) {
                    req.session.user = {
                        id: adminLogin.id,
                        login: adminLogin.login,
                        password: adminLogin.password
                    }
                    res.redirect('/atividades')

                } else {
                    res.redirect('/login')
                }

            } else {
                res.redirect('/login')
            }
        }

Alguém consegue me ajudar a fazer esta ação funcionar via ajax de forma que não atualize a pagina?

#2

Isso resolve:

lembrando que vc precisa passar um id pra o seu form antes.

HTML

<form id="meuForm">
</form>

Vanilla JS

<script>
   const form = document.getElementById('meuForm');
   
   form.addEventListener('submit', function(e) {
     e.preventDefault();
   });
</script>

JQuery:

<script>
  $(document).ready( function() {
    $("#meuForm").on('submit', function(e){
       e.preventDefault();
    });
  })
</script>
#3

Como chamar a rota /authenticate via ajax pela view?

#4

Olha, eu nao tenho conhecimento com Ajax, geralmente uso o Axios.

Mas dá uma olhada aqui:

#5

No lugar de post.php coloque o caminho relativo ao seu endpoint nodejs.

1 curtida