How do I send form data from frontend to backend so when user is at login they can login-CodePudding

I'm very new to backend development and I'm trying to figure out how to send my form data from front to backend. I watched a youtube tutorial on how and this is my code for server.js:

const express = require("express");
const app = express();
const port = 2009;

app.use(express.static("public"));
app.use(express.json());

app.get("/", (req, res) => {
  res.status(200).json({info: "something"});
});

app.post("/", (req, res) => {
  const { parcel } = req.body;
  if (!parcel) {
    return res.status(400).send({status: "failed"});
  }
  res.status(200).send({status: "recieved"});
});

app.listen(port, () => console.log(`server.js running on port: ${port}`));

And here is the code for script.js for my form:

const submit = document.getElementById("submit");
const userName = document.getElementById("user");
const password = document.getElementById("pass");
const email = document.getElementById("mail");

const baseUrl = "http://localhost:2009/"

async function post(e) {
  e.preventDefault();
  const res = await fetch(baseUrl   "website?key=hello", {
    method: "POST"
  })
}

Like I said I basically have no clue what I am doing could someone help me?

I haven't tested it yet because I'm afraid it won't work if would be very helpful if someone could show me some code or point me to some documentation so that I can work in the right direction.

CodePudding user response：

you seem to be on the right track just a few changes and additions.

const registerForm = document.getElementById('register_form');

async function post(e) {
  const form = document.forms.register_form;
  const email = form.email.value;
  const password = form.password.value;
  const username = form.username.value;

  try {
    const res = await fetch(baseUrl   "website?key=hello", {
      method: "POST",
      body: JSON.stringify({
        email,
        username,
        password,
     }),
     headers: { "Content-Type": "application/json" },
   });

  // handle the response here
 } catch (error) {
  // handle error here
 }
}

registerForm.addEventListener('submit', post, false);

on the backend, you will need a route to handle this request

app.post("/", (req, res) => {
  const { username, email, password } = req.body;

  // validate the data from the request
  if (!username || !email || !password) {
   return res.status(400).send({
      status: "failed",
      message: "fields are required"
   });
  }

  res.status(201).send({status: "recieved"});
});

StatusCode 201 indicates a new resource has been created

References:Using Fetch Api statusCode

I hope this helps.