Send Form Data With Ajax

Yuba El Oualidi — Sat, 16 Sep 2023 18:07:32 +0000

Hello For Everyone !

Steps:

Create an index.html file (HTML)
Create a app.js file (JavaScript)

// You Can Also Style Your Form If You Need That !

HTML Codes:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
       Send Form Data With Ajax 
       By (https://dev.to/yubaeloualidi)
    </title>
</head>
<body>
    <div id="message"></div>
    <form id="form">
        <input type="text" name="username" autocomplete="off" required="required" />
        <input type="password" name="password" autocomplete="new-password" required="required" />
        <button id="login" type="submit">Login</button>
    </form>

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

JavaScript Codes:

const request = new XMLHttpRequest(),
    form = document.getElementById("form"),
    login = document.getElementById("login"),
    message = document.getElementById("message");

form.onsubmit = event => {
    event.preventDefault();
    const formData = new FormData(form);
    var body = "";

    for (const [key, value] of formData) {
        body += `${key}=${value}&`;
    }

    body = body.substring(0, body.length - 1);

    request.addEventListener('readystatechange', () => {
        if (request.readyState === 4 && request.status === 200) {
            console.log(JSON.parse(request.responseText));
        }
    })

    request.open('POST', 'read.php');
    // Warning: you need to change the request URL (read.php) with 
       your personal

    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
    request.send(body);
}

When You Click on The Button (login), You Can Check if The request is sended in (web developers tool -> network -> your file)

Best Express JS Routing For Multiple WebPages

Yuba El Oualidi — Mon, 14 Aug 2023 11:15:54 +0000

We learn in this tutorial, how to make the best express js routing code.

This a simple express js code example:

const express = require('express')
const app = express()

// GET method route
app.get('/', (req, res) => {
  res.send('GET request')
})

// POST method route
app.post('/', (req, res) => {
  res.send('POST request)
})

This method is good, if you have just one webpage, but is not good for multiple pages, because you will need to repeat the code more than once.

So, you can use the Foreach for example to solve this problem:

Solve Problem Steps:

Step 1:

Create the Array variable like this :

const pages = [
   ["/"        , "index.html"  ],
   ["/contact" , "contact.html"],
   ["*"        , "404.html"    ],
]

Step 2:

Create a forEach loop

pages.forEach(pages =>{
  // GET method route
  app.get(pages[0], (req, res) => {
    res.sendFile(__dirname + "/" + pages[1])
  })
})

Step 3:

Run the complete code :

usign node js :

node ./file_name.js

usign nodemon : you need to install nodemon