Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 72358

Single Page Application with NodeJS

$
0
0

What I'm trying to do in my Single Page Application is that whenever a login button is clicked it fetches an html FORM from the nodejs server using XMLHttpRequest and then displays it in the display area. After filling the form and clicking the button it again fetches other HTML Forms from the server. Following is the code:

document.addEventListener('DOMContentLoaded', () => {

     const login = document.querySelector("#login");

      const displayArea = document.querySelector("#displayArea");

      login.onclick = () => {

         loginPage('GET', '/login');

      };


     const loginPage = (method, url) => {

         let xml = new XMLHttpRequest();

         xml.open(method, url);

         xml.onload = () => {

             let loadPage = JSON.parse(xml.responseText);

             document.title = loadPage.title;

             displayArea.innerHTML = loadPage.form;

             const submit = document.querySelector("#submit");

             submit.onclick = (e) => {

                 e.preventDefault();

                 loginAuth();

             };

         };

         xml.send();

     };

     const loginAuth = () => {

         const username = document.querySelector("#username");

         const password = document.querySelector("#password");

         let auth = {

             username: username.value,

             password: password.value

         };

         let url = "/login/" + JSON.stringify(auth);

         const xml = new XMLHttpRequest();

         xml.open('POST', url);

         xml.onload = () => {

             let loadPage = JSON.parse(xml.responseText);

             document.title = loadPage.title;

             displayArea.innerHTML = loadPage.form;

         };

         xml.send();

 };});

Since the Form data is not available / visible outside the calling function, the challenge is if I keep fetching the HTML Forms within the functions it will be a nested function call. How do I avoid that situation? Is there an easy way out?

Thanks for your help!


Viewing all articles
Browse latest Browse all 72358

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>