I'm practicing server requests (using express JS | v. 4.17.1) through an exercise that is supposed to have the following sequence:
click button : send server request (using jQuery $.get) : send res file from routes.js page
The issue is that the routesJS page DOES send a response, but the response shows up in the console of browser instead. Here are snippets of code with some explanation
- The html page contains the |button| and the script for initiating the request
<script>
$("#go").on("click", function(event){
//no flickering*
event.preventDefault();
//get the page
$.get("/clicked", ' ', function(res){
//lets user know the click was received
alert("getting page along clicked path");
//prove that the server has a response
console.log("server response with:\n\n" + res);
});
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button</title>
</head>
<body>
<p>The Button</p>
<button id="go">Click Me</button>
</body>
</html>
- the routesJS page requires the following packages
-- path >> this was used to get the whole path using a res.sendFile()
-- http >> this was introduced in a method from youtube ref
-- fs >> this was introduced in a method from youtube ref
//inside routesJS page
var path = require("path");
var http = require("http"); //introduced in youtube ref
var fs = require("fs"); //introduced in youtube ref
//youtube ref
//https://www.youtube.com/watch?v=p5eCYKiZN-4
module.exports = function (app) {
/** 01) original index page-retrieval method
* uses 'path'
* delivers main page before a button click
* ----------------------------------------
app.get("/", function(req, res) {
res.sendFile(path.join(__dirname, "/../public/index.html"))
});
***/
/** 02) original response page retrieval method
* uses 'path'
* returns the second page after button clicks
* -------------------------------------------
app.get("/clicked", function (req, res) {
res.sendFile(path.join(__dirname, "/../public/click.html");)
}
***/
/** 03) this is from the youtube reference above
* intended to take the place of (02) if it works
* uses 'path' to join; (03) is currently active*/
app.get("/clicked", function (req, res) {
console.log("\n..page button was clicked; checking fs..");
//turn joined paths into variables; test necessity of path
//---------------------------------------------------------
var path1 = path.join(__dirname, "/../public/click.html");
var path2 = "./app/public/click.html";
//re-tries method (02) > to no avail
//----------------------------------
//res.sendFile(path1);
//passes a url, a null, and a callback to fs.readfile
//---------------------------------------------------
fs.readFile (path2, null, function(error, data) {
if (error) {
//in the event of an error
//------------------------
res.writeHead(404);
res.write("...we have not seen that file!");
console.log("error occurred during fs read");
} else {
//in the event of a successful read, 3x ways tried to send data
//Option.3A: defines writeHead and writes the <html> as data
//remember to write writeHead vs writehead (capitalization matters)
//-----------------------------------------------------------------
//res.writeHead(200, {'Content-Type' : 'text/html'});
//res.write("..your file was successfully read...");
//res.write(data);
//Option.3B: sets the status, defines content type, sends data
//------------------------------------------------------------
//res.sendStatus(200);
//res.set("Content-Type", "text/html");
//res.write(data);
//Option.3C: defines requirement type as 'html'
//use the res.format() per expressjs.com below
//expressjs.com/en/4x/api.html#res.format
//---------------------------------------
req.accepts("html");
res.format({
html: function () {
console.log("sending data through html format");
res.send(data)
},
default: function() {
//log the request and respond with 406
res.status(406).send("not acceptable")
}
});
console.log("..the fs read was successful; check the browser");
console.log("..the writeHead has been written..");
}
console.log("..ending..");
res.end();
}); //closes fs.readFile
}); //closes app.get "clicked"
// If no matching route is found, the default to home
app.use(function (req, res) {
res.sendFile(path.join(__dirname, "/../public/index.html"));
});
};
In your response, you mentioned that the I have to insert the retrieved data with the javascript. The javascript between the < script > tags do retrieve the data in the form of text, but it's plain text Is there some code that I need to add to the html-side js to make the page render? Or does the res.sendFile do it? – Arthur L. Jun 21 '20 at 23:53