We Keep Coding

How to send JSON as respond from Node js to Html file

I'm trying to send JSON from Node js to html file as a response, but after I submit HTML form disapears and this shows up Respond after I submit a form. I tried ajax but it doesn't work beacuse I get redirected to this (image above). I'm trying to make a simple login form and if user inputs nothing then message should get displayed saying "Nothing was input" below the form.
JS code (node.js, express framework)
app.get('/login', function(req, res){
res.sendFile(path.join(__dirname+'/Frontend/html/login.html'));
});
app.post('/login', function(req, res){
res.json({a: 5});
});
html code
<form method="POST">
<input type = "text" name = "username" id = "username" placeholder="Username">
<input type = "password" name = "password" id = "password" placeholder="Password">
<button id = "gumb" type = "submit">Prijavi se</button>
</form>
<p id = "demo"></p>
<script>
document.getElementById('gumb').addEventListener('click', function(){
const xhr = new XMLHttpRequest();
console.log("test");
if(xhr.readyState == 4 && xhr.status == 200){
document.write(xhr.responseText);
}
else{
console.log("broke");
}
xhr.open('get', 'http://localhost:8000/login', true);
});
</script>

Your code works as expected, you just send a json key-value pair to your frontend, when the route is invoked. The data is shown in your browser.
app.post('/login', function(req, res){
res.json({a: 5});
});
Usually, you would want to do something with the data sent to your backend:
app.post('/login', function(req, res){
user= req.body.username;
password = req.body.password;
console.log(`User: ${user} is requesting login`);
// do something with the data - login, save, edit
res.end();
});
Since you obviously commit login data (FROM a form TO your backend),
you should use some authentification middleware to perform a login.
To comfortably send processed html to your backend, you should get acquainted with the subject of views.
And the express api documentation will be very useful to you, I'm sure. ;)
https://expressjs.com/en/api.html

How does one load a different html page from the same Express controller script?

I want to change the first page (login page), after some defined action has been performed on it, with a second page (admin dashboard) from the same controller in Express.
Here's my controller code from nimda.js that matters:
function handlePut(req, res){
let html = fs.readFileSync(path.join(__dirname,'../static/feed.html'));
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(html);
}
router.put('/', handlePut);
// This handles the form submitted.
router.post('/', function(req, res){
if(req.body.pwd != '1234')
res.send('False');
else
{
//Doesn't work from here.
handlePut(req, res);
}
});
//This is when server.js routes the request to this script
router.get('/', function( req, res){
let html = fs.readFileSync(path.join(__dirname,'../static/login_nimda.html'));
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(html);
});
I thought that doing a PUT from my POST code after authentication would help me send a new HTML page as a response. The first HTML page is login_nimda.html that does the POST request to /nimda.
This doesn't work and I stay on the same login_nimda.html. The POST request works properly though.
Here's the script of my login_nimda.html:
<script>
$('#submit').on('click', function(){
var form = $('#log').serialize();
$.post('/nimda', form).done(function(data) {
if(data=="False" && $('#err').length==0){
$('#log').prepend('<p id = "err" class = "alert alert-info" align = "centre" > Incorrect!</p>');
}
else
{
$('#err').remove();
document.location.href = '/nimda/'+data;
}
});
});
</script>
Any alternatives to this approach are most welcome.

Okay, so I could come up with two totally non-secure ways-
1. Passing the password as method information post authentication
The script under login_nimda.html is modified to send a request to the same controller nimda.js:
$.post('/nimda', form).done(function(data) {
if (data == "False" && $('#err').length == 0) {
$('#log').prepend('<p id = "err" class = "alert alert-info" align = "centre" > Incorrect!</p>');
} else {
$('#err').remove();
document.location.href = '/nimda/'+$('input[type="password"]').val();
}
});
Since the password will be present in the URL only post successful authentication, only an authorized user would see it - Downside: The password with the URL gets cached
nimda.js is modified to load the "second page":
//the handler I added
router.get('/your_password', function(req, res){
let html = fs.readFileSync(path.join(__dirname,'../static/second_page.html'));
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(html);
});
//for login authentication
router.post('/', function(req, res){
if(req.body.pwd != '1234')
res.send('False');
else
res.send('True');
});
2. Passing a random string to the controller in the method information post authentication
Hmmm, I've no better option currently
The script under login_nimda.html is modified to send a request to the same controller nimda.js but this time, not passing the password but a random string received post authentication as an access key:
<script>
$('#submit').on('click', function(){
var form = $('#log').serialize();
$.post('/nimda', form).done(function(data) {
if(data=="False" && $('#err').length==0){
$('#log').prepend('<p id = "err" class = "alert alert-info" align = "centre" > Incorrect!</p>');
}
else
{
$('#err').remove();
document.location.href = '/nimda/'+data;
}
});
});
</script>
nimda.js is modified to add a new route handler only every time authentication is successful with the route /nimda/new_random_string and the key (new_random_string) is passed as a response so that the control moves to the new handler to display the second page:
var key = '';
function createRandomString( length ) {
var str = "";
for ( ; str.length < length; str += Math.random().toString( 36 ).substr( 2 ) );
key = str.substr( 0, length );
return key;
}
router.post('/', function(req, res){
if(req.body.pwd != '1234')
res.send('False');
else
{
router.get('/'+ createRandomString(16), function(req, res){
let html = fs.readFileSync(path.join(__dirname,'../static/feed.html'));
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(html);
});
res.send(key);
}
});
This way the key can changes with every request and so cache is rendered useless.
Please let me know a better solution. I know there is!

When you send your POST request in JavaScript, you are in the browser (client side). The response to that request will be received by the browser, as text data, containing HTML or whatever the server sent.
If as a response to the data you received in JavaScript you want to move to another page, you must do that in JavaScript.
In JavaScript you will use window.location:
$.post('/nimda', form).done(function(data) {
if (data == "False" && $('#err').length == 0) {
$('#log').prepend('<p id = "err" class = "alert alert-info" align = "centre" > Incorrect!</p>');
} else {
$('#err').remove();
document.location.href = '/some-page.html';
}
});

Node.js, Express: How can I handle res.send values with the client

I'm a newbie in node.js, and I'm also using express.
I build a simple web application to upload files to a server, and save them, when they are okay. That works fine, but now I want to inform the client about the current state( is it uploaded or did it not work, because of the large size from the file).
I know that I should use res.send(), but I want to display it on the same page( with all elements on "upload.html"), where the client uploaded the file. I guess, I have to using client sided javascript to work with the sended information, but how do I communicate with server side javascript and client side javascript? Or do I not need to use client sided javascript?
(I would like to combine it later with HTML, so I can design the answer from the server with CSS.)
server.js:
var express = require('express'),
fileUpload = require('express-fileupload'),
fs = require('fs'),
obSizeOf = require('object-sizeof'),
app = express();
app.use(express.static("public"));
app.use(fileUpload());
app.get("/upload.html", function(req, res){
res.sendfile(__dirname + "/" +"upload.html");
})
app.post('/upload.html', function(req, res) {
if(obSizeOf(req.files.sampleFile) > 10000000)
{
res.send("The size of the not-uploaded file is to large! Please use a file with a maximal size of 10MB");
return;
}
else
{
var sampleFile;
if (req.files.sampleFile.name == "") {
res.send('No files were uploaded.');
return;
}
else
{
sampleFile = req.files.sampleFile;
var typ = sampleFile.mimetype.split("/");
console.log(typ[0]);
if(fs.existsSync("public/upload/image/"+typ[0]+"/"+sampleFile.name))
{
res.send("A File with the same name already exists! Please rename it!");
return;
}
else
{
sampleFile.mv('public/upload/'+typ[0]+'/'+sampleFile.name , function(err) {
if (err){
res.send('File NOT UPLOADED!');
}
else { console.log("Mieeep!"); res.send(typ[0].charAt(0).toUpperCase()+typ[0].slice(1) +' data uploaded!');
}
});
}
}
}
});
app.listen("8000");
/upload.html:
<html>
<body>
<form ref='uploadForm'
id='uploadForm'
action='/upload.html'
method='post'
encType="multipart/form-data">
Upload File
</br>
<input type="file" name="sampleFile" />
</br>
<input type='submit' value='Upload!' />
</br>
<p id="serverInformation"></p> <!--Placeholder for information from the server-->
Only images
</form>
</body>
</html>

What you actually need is socket programming. Using node js you can do that easily.
just see this link for more on socket and node js.

you can use AJAX and check the error status. there
...
<script>
$(document).ready(function() {
$("#uploadForm").submit(function() {
$.ajax({
type: "POST",
url: "/upload.html",
data: $(this).serialize(),
complete: function(xhr, statusText){
alert(xhr.status+" : "+ statusText);
}
})
})
})
</script>

Passing a JSON object from clientside JavaScript to NodeJS

I have a webpage which creates a JSON object based on user input. I would like to then somehow allow the user to submit this JSON object to a NodeJS script for processing/insertion into a MySQL database. However, I'm really not sure how to do something like this -- the best I can come up with is some form of a POST, but I'm not sure where to start with this.
Because I don't know what such a method would be described as, I haven't had much success in locating any tutorials or other resources online.
Could anyone suggest some articles or documentation to look at that would be relevant to something like this? Or, at least, tell me what to search for? Thanks.
EDIT: This is the code I am trying to get working at the moment. I'm just trying to convert the POST data type from string to JSON on both sides.
Serverside:
var express = require('express');
var fs = require('fs');
var app = express();
app.use(express.bodyParser());
app.get('/', function(req, res){
console.log('GET /')
//var html = '<html><body><form method="post" action="http://localhost:3000">Name: <input type="text" name="name" /><input type="submit" value="Submit" /></form></body>';
var html = fs.readFileSync('index.html');
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(html);
});
app.post('/', function(req, res){
console.log('POST /');
console.dir(req.body);
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('thanks');
});
port = 8080;
app.listen(port);
console.log('Listening at http://localhost:' + port)
Clientside:
<html>
<body>
<form method="post" action="http://localhost:8080">
Name: <input type="text" name="name" />
<input type="submit" value="Submit" />
</form>
<script type="text/JavaScript">
console.log('begin');
var http = new XMLHttpRequest();
var params = "text=stuff";
http.open("POST", "http://localhost:8080", true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//http.setRequestHeader("Content-length", params.length);
//http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {
console.log('onreadystatechange');
if (http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
else {
console.log('readyState=' + http.readyState + ', status: ' + http.status);
}
}
console.log('sending...')
http.send(params);
console.log('end');
</script>
</body>
</html>

Here is a very basic example using jQuery to do the post request and an express app. I think it should be a decent starting point.
// client side, passing data to the server
$.post("/foo/", { data : { foo : "bar" } }, function(temp) {
// temp === "I am done";
});
// serverside app.js
var express = require("express");
var app = express();
// will parse incoming JSON data and convert it into an object literal for you
app.use(express.json());
app.use(express.urlencoded());
app.post("/foo/", function(req, res) {
// each key in req.body will match the keys in the data object that you passed in
var myObject = req.body.data;
// myObject.foo === "bar"
res.send("I am done");
});
EDIT: JSON.stringify() and JSON.parse() will serialize/deserialize JSON. (jQuery makes this much easier, but if you wanna go pure javascript)
Change to var params = "text=" + JSON.stringify({ foo : "bar" });
and
console.dir(JSON.parse(req.body.text));
It worked for me on my local.

Node JS and ajax problems

I am trying to receive data through ajax from node.js but I am not sure what I am doing wrong between interacting the two.
Here is my ajax get request:
$.get('/notificationsNumber',
function (notify) {
alert(notify);
$('.notifications').html("Notifications " + 0).css("color","red")
});
Here is my node.js file:
exports.notificationsNumber = function(req, res) {
console.log('notifying start');
Friend.findOne({userId: req.signedCookies.userid}, function(err,user) {
if(err) {
res.send(err);
console.log('notifying err');
} else {
console.log('notifying');
console.log(user.notifications);
var notify = user.notifications;
console.log(notify);
res.send(notify);
}
});
};
UPDATE:
app.get('/notificationsNumber', user.notificationsNumber);
Here is the app.js code:
The alert is popping up the html doc of the page for some reason... and the line underneath it actually works correctly. Trying to connect the notify (which on the server side prints out the correct data).

Ok I was doing it as res.send it should be res.json...