I have set up a node/express server that sends the ajax-start.html file. Within this file, there is a script that enables ajax requests to be made to the server. Everything functions correctly in this setup. However, I am looking to enhance this process by modifying the text file before it is sent back from the server. As someone new to this, I am attempting to adapt an example from MDN to suit my specific needs.
Below is the HTML code for ajax-start.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ajax starting point</title>
<!-- CSS styles -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
</head>
<body>
<h1>Ajax starting point</h1>
<!-- Form section -->
<form>
<label for="verse-choose">Choose a verse</label>
<select id="verse-choose" name="verse-choose">
<option>Verse 1</option>
<option>Verse 2</option>
<option>Verse 3</option>
<option>Verse 4</option>
</select>
</form>
<!-- Display area of selected verse -->
<h2>The Conqueror Worm, <em>Edgar Allen Poe, 1843</em></h2>
<pre>Displayed Verse Will Appear Here</pre>
<!-- JavaScript section -->
<script>
// JavaScript logic
</script>
</body>
</html>
The node/express (app.js) code snippet:
const express = require("express");
const fs = require("fs");
const app = express();
app.use(express.static(`assets`));
// Set route for sending ajax-start.html
app.get("/", (req, res) => {
res.sendFile(__dirname + "/ajax-start.html");
});
// Start server
app.listen(5000, () => {
console.log(`listening`);
});