Steps to Create an Express Application

Approach to get URL after “#” in Express:

Step 1: In the first step, we will create the new folder by using the below command in the VScode terminal.

mkdir folder-name
cd folder-name

Step 2: After creating the folder, initialize the NPM using the below command. Using this, the package.json file will be created.

npm init -y

Step 3: Now, we will install the express dependency for our project using the below command.

npm install express body-parser

Project Structure:

File Structure

The updated dependencies in the package.json file will look like:

"dependencies": {
   "body-parser": "^1.20.2",
   "express": "^4.18.2",
}

Example: Below is the code of above explained approach

Javascript

// index.js 
  
const express = require("express"); 
const bodyParser = require("body-parser"); 
const cors = require("cors"); 
  
const app = express(); 
const port = 3000; 
  
app.use(cors()); 
app.use(bodyParser.json()); 
  
app.post("/processFragment", (req, res) => { 
    const fragmentValue = req.body.fragment; 
    console.log('Fragment value:', fragmentValue); 
  
    // doing according to your need with the fragmented value 
  
    const responseMessage = 
        `Fragment value received and processed.  
        \nInput Value: ${fragmentValue}`; 
    res.send(responseMessage); 
}); 
  
app.listen(port, () => { 
    console.log(`Server listening  
        at http://localhost:${port}`); 
}); 

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0"> 
    <title>Express Fragment Identifier Example</title> 
</head> 
<style> 
    body { 
        font-size: 40px; 
    } 
  
    input, 
    button { 
        font-size: 25px; 
    } 
</style> 
  
<body> 
    <p id="responseContent"></p> 
  
    <form id="myForm"> 
        <label for="fragmentInput">Example Fragment:</label> 
        <input type="text" id="fragmentInput" 
               name="fragment" placeholder="enter here"> 
        <button type="button" onclick="submitForm()"> 
            Submit 
        </button> 
    </form> 
  
    <script> 
        function submitForm() { 
            var fragmentValue = 
                document.getElementById('fragmentInput').value; 
  
            var xhr = new XMLHttpRequest(); 
            xhr.open('POST', 'http://127.0.0.1:3000/processFragment', true); 
            xhr.setRequestHeader('Content-Type', 'application/json'); 
  
            xhr.onreadystatechange = function () { 
                if (xhr.readyState === 4) { 
                    if (xhr.status === 200) { 
                        // Display the response content 
                        document 
                            .getElementById('responseContent') 
                              .innerText = xhr.responseText; 
                    } else { 
                        // Update the status message on error 
                        document.getElementById('status') 
                            .innerText = 'Error processing fragment value.'; 
  
                        // Clear the response content on error 
                        document.getElementById('responseContent').innerText = ''; 
                    } 
                } 
            }; 
  
            // Send the request with the entered fragment value 
            xhr.send(JSON.stringify({ fragment: fragmentValue })); 
        } 
    </script> 
</body> 
  
</html>

Step 4: Run the below command to start the server

node index.js

Output:

Output

How to get url after “#” in Express Middleware Request ?

In Express, the fragment identifier (the part of the URL after the # symbol) is not directly accessible on the server side because it is not sent to the server as part of the HTTP request. The fragment identifier is typically used for client-side navigation and is processed on the client side only.

If we need to access data from the fragment identifier on the server side, we can use JavaScript on the client side to send that data to the server, either through an AJAX request or by including it in a regular HTTP request.

Tags:

#Geeks Premier League 2023 #Express.js #Geeks Premier League #Node.js #Web Technologies

Approach to get URL after “#” in Express:

Steps to Create an Express Application

Javascript

HTML

How to get url after “#” in Express Middleware Request ?

Similar Reads