Handling Input Data in Express.js

When building web applications, handling user input data is a critical aspect to create interactive and flexible features. In the Express.js development environment, you can easily process input data from forms and various HTTP requests such as GET, POST, PUT, PATCH, and DELETE. Here's a detailed guide with multiple methods and examples to help you achieve this:

Receiving Information from Form

Creating HTML Form: Start by creating an HTML form in a Pug or EJS file. Ensure that you set the action attribute in the <form> tag to specify the route where the request will be sent.

<form action="/process" method="post">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <button type="submit">Submit</button>
</form>

Handling POST Request: In the route handler, utilize the body-parser middleware to extract data from the POST request.

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

app.use(bodyParser.urlencoded({ extended: true }));

app.post('/process', (req, res) => {
  const username = req.body.username;
  const password = req.body.password;
  // Process data and return results
});

Handling Various Request Types with Login Example

Sending POST Request from Login Form: In the HTML form, ensure that you set the post method and the action attribute to specify the route where the POST request will be sent.

<form action="/login" method="post">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <button type="submit">Login</button>
</form>

Handling POST Request for Login: In the route handler, use the body-parser middleware to extract data from the POST request and perform login processing.

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

app.use(bodyParser.urlencoded({ extended: true }));

app.post('/login', (req, res) => {
  const username = req.body.username;
  const password = req.body.password;

  // Check login information
  if (username === 'admin' && password === '123') {
    res.send('Login successful!');
  } else {
    res.send('Login failed!');
  }
});

Handling PUT and DELETE Requests

Handling PUT Request: To handle PUT requests, you can use a route and middleware to extract data from the request and perform the corresponding update.

app.put('/update/:id', (req, res) => {
  const id = req.params.id;
  const updatedData = req.body;
  // Perform data update with corresponding ID
});

Handling DELETE Request: To handle DELETE requests, also use a route and middleware to identify the ID and perform deletion.

app.delete('/delete/:id', (req, res) => {
  const id = req.params.id;
  // Perform data deletion with corresponding ID
});

Conclusion

Understanding how to handle user input data and various HTTP requests is crucial in web development. By using Express.js and middleware like body-parser, you can easily process input from forms and handle different HTTP requests including GET, POST, PUT, PATCH, and DELETE. This enables you to create interactive and flexible features on your website.