req.body.username not outputting the correct value - javascript

sent data -
http.send(JSON.stringify(data));
outputting data -> {username: "dsa", password: "dsa"}
outputting JSON.stringify(data) ->
"{"username":"dsa","password":"dsa"}"
outputting req.body server side ->
{ '{"username":"dsa","password":"dsa"}': '' }
outputting req.body.username ->
undefined (expecting "dsa")
Body parser is installed and used with the app.
Javascript:
server.register = function(){
console.log('ran func');
usernameinput = document.getElementById("registerform").elements["username"].value
passwordinput = document.getElementById("registerform").elements["password"].value
var data = {
"username":usernameinput,
"password":passwordinput
}
http.open("post", server.regurl,true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.send(JSON.stringify(data));
}
server setup code contains the following:
const bodyParser = require('body-parser')
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }))
app.use(express.static(__dirname + '/')),

You stringified your JSON object so you can really adress its keys on server side - Its a plain string.
you could send it as is (a JSON object)
sent data - http.send(data);
or
sent data - http.send({payload: JSON.stringify(data)});
and then on server side
var x = JSON.parse(req.body.payload)
x.username;
UPDATE FOR ANSWER:
after reading a bit.
AJAX - Send a Request To a Server
and it says you should infact send a
string so it might be just a bad string format.
xhttp.open("POST", "demo_post2.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
but JSON.stringify won't give you this 'URLish' syntax. maybe you should manipulate the string before you send it .

if you are using JSON.stringify you need something like this 'application/json'
server.register = function(){
console.log('ran func');
usernameinput = document.getElementById("registerform").elements["username"].value
passwordinput = document.getElementById("registerform").elements["password"].value
var data = {
"username":usernameinput,
"password":passwordinput
}
http.open("post", server.regurl,true);
http.setRequestHeader('Content-type', 'application/json')
http.send(JSON.stringify(data));
}

Related

How do I res.send object to the backend from the front end?

I am trying to communicate with the frontend to the backend. currently, I have the backend sending an expression to the frontend, and the frontend computes it. from there I want the frontend to send the computed answer back to the backend.
Forexample:
the backend sends "2+2="
the frontend computes that 2+2 = 4
the frontend then sends the answer 4 to the backend
the backend logs the answer 4
Front-end
var XMLHttpRequest = require('xhr2');
const URL = "http://localhost:5000/"
let firstNumber = Math.floor(Math.random() * 10);
let secondNumber = Math.floor(Math.random() * 10);
const express = require('express');
const app = express();
// excecuting random addition
const finalExpression = firstNumber + "+" + secondNumber + "="
console.log(finalExpression);
var xhr = new XMLHttpRequest();
xhr.open("POST", URL, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
expression: finalExpression
}))
Back-end:
const express = require('express')
const app = express()
app.use(express.json())
app.post('/', (req, res) => {
console.log(req.body.expression);
arr = req.body.expression.split("")
console.log(parseInt(arr[0]) + parseInt(arr[2]))
// res.send(parseInt(arr[0]) + parseInt(arr[2]))
})
app.listen(5000, () => console.log())
as you can see, I tried res.send in the frontend to the backend.
You appear to have mixed things up a little.
You can't use express on the front-end - it's a node application. You shouldn't need to use XMLHttpRequest on the server at all. express will handle all the routing for you.
You should use fetch on the front-end to get/post requests to the server (I've used async/await here).
It might look a little more like this.
Server:
// Send an expression to the front-end
app.get('/getExpression', (req, res) => {
res.send(expression);
});
app.post('/postResult', (req, res) {
const result = res.body;
// Calculate whether the result is correct,
// and then send the answer back
res.send(isResultCorrect);
});
Client:
// To get the expression from the server
const response = await fetch('/getExpression');
const expression = await response.text();
// To post the result back to the server
const options = { type: 'POST', body: result };
const response = await fetch('/postResult', options);
const isResultCorrect = await response.text();
You invert frontend and backend :) It is the frontend that sends the XMLHTTPREQUEST and it is the server that processes the request and returns the response.
This being said, using res.send is the right solution to return a response. You did the right thing in BACKEND. Therefore, you can uncomment the // res.send(parseInt(arr[0]) + parseInt(arr[2])) and leave the backend code as it is.
What is missing in the FRONTEND is a code to listen to and handle this response :
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
console.log(xhr.response);
}
}
Add it after var xhr = new XMLHttpRequest();
Your code should then look like this :
var xhr = new XMLHttpRequest();
// New code added here
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
// Handle the response (ex: console.log it)
console.log(xhr.response);
}
}
xhr.open("POST", URL, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
expression: finalExpression
}))

POST request body is empty on server

I am trying to make an AJAX request from the client side javascript using XMLHttpRequest. Following is the code for it:
document.getElementById('myform').onsubmit=function(){
var http = new XMLHttpRequest();
var text = document.getElementById('myinput').value;
console.log(text);
http.onreadystatechange = function(){
if(http.readyState === 4 && http.status === 200){
location.reload();
}
};
http.open('POST','/todo',true);
http.setRequestHeader("Content-Type", "application/json");
var obj = {
item:text
};
http.send(JSON.stringify(obj));
}
This works fine without anny errors. However, on the server side, when I try to log the request body to the console, it shows as an empty object. Can someone help me with this? Following is the server side code for handling the post request:
app.post('/todo',urlencodedParser, function(req,res){
console.log(req.body); // This logs an empty object to the console!
newItem = Todo(req.body);
newItem.save(function(err,data){
if(err) throw err;
res.json(data);
});
});
JSON encoding and URL encoding are different.
If you wish to send the data with JSON encoding, then you must receive it with the appropriate middleware:
const bodyParser = require('body-parser');
app.post('/todo', bodyParser.json(), function(req,res){
console.log(req.body); // This logs an empty object to the console!
newItem = Todo(req.body);
newItem.save(function(err,data){
if(err) throw err;
res.json(data);
});
});
It most likely worked with jQuery because urlencoding is default behavior for $.post.

XHR doesnt send json object

I have client - server express app. Im trying to send an XHR request from frontend to my controller, while passing json data. My frontend code looks like this:
function handle_login(){
var username_field = document.getElementById('input_username');
var pass = document.getElementById('input_password');
if(username_field.value!=null)console.log(username_field.value);
console.log(pass.value);
//window.location.href = "/loginAttempt/"+username.value+"-"+pass.value;
var xhr = new XMLHttpRequest();
var url = "/home_pogled";
xhr.open("GET", url, true);
xhr.setRequestHeader("Content-type", "application/json");
var data = {
username : username_field.value,
password : pass.value
}
var json = JSON.stringify(data);
xhr.send(json);
xhr.onload = function() {//ob uspesnem odgovoru
var responseText = xhr.responseText;
//console.log("Backend server response -" +responseText);
// uporabi odgovor
};
xhr.onerror = function() {
console.log('There was an error!');
};
}
I can send the request and i'm certain that data is written to the json object prior to sending it, but when i do consonle.log(req.body) in my controller upor receiving the request the body is empty "{}", where is should havec ontained the username and password values in a json objkect. What am i missing?
Client Side:
We can't send object in GET method, it should be query params like below snippet
let url = `/home_pogled?username=${username_field.value}&password=${pass.value}`;
xhr.open('GET', url);
Server side (express app):
In express js, we can get the query params in req.query
let username = req.query.username;
let password = req.query.password

FormData change from multipart/form-data to form-urlencoded?

I am using the current javascript to post form data
var request = new XMLHttpRequest();
request.open("POST", "/validate",false);
request.send(new FormData(form)); // form is document.getElementById("#form")
With an expressjs backend using body-parser with following settings
app.use(parser.urlencoded({ extended: false }));
The form data is being posted properly with content-type to multipart/form-data; but according to body-parser they don't parse multipart content. How can i change the form submission to either urlencoded or json both of which can be parsed by the backend ?
Try add a header to request and convert data to url-encode format
function urlencodeFormData(fd){
var s = '';
function encode(s){ return encodeURIComponent(s).replace(/%20/g,'+'); }
for(var pair of fd.entries()){
if(typeof pair[1]=='string'){
s += (s?'&':'') + encode(pair[0])+'='+encode(pair[1]);
}
}
return s;
}
var request = new XMLHttpRequest();
request.open('POST', '/validate', false);
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
request.send(urlencodeFormData(new FormData(form)));

How do you send a post via XMLhttprequest to my own Node server in vanilla javascript?

I am trying to send data to node via a XMLhttprequest. The data looks like this (/q/zmw:95632.1.99999.json). My connection to Node is correct, however, I was getting an empty object so I set the headers to Content-Type application/json and then stringified the data. However Node gives me a Unexpected token " error. I presume it is because of the string, however, if I don't stringify the data then it errors out because of the "/" in the data. How do i properly send the data using pure Javascript. I want to stay away from axios and jquery because I want to become more proficient in vanilla javascript. I will make the final call to the api in node by assembling the url prefix and suffix.
Here is my code:
function getCityForecast(e){
//User selects option data from an early JSONP request.
var id = document.getElementById('cities');
var getValue = id.options[id.selectedIndex].value;
//Assembles the suffix for http request that I will do in Node.
var suffix = getValue + ".json";
var string = JSON.stringify(suffix);
console.log(suffix);
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost:3000/", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(string);
}
Node.js code:
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var path = require('path');
var request = require('request');
var http = require('http');
// ****************** Middle Ware *******************
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(express.static(__dirname + '/public'));
app.post('/', function(req, res){
console.log('working');
console.log(req.body);
});
app.listen(3000, function() { console.log('listening')});
I figured it out my mistake and this was my problem. I was trying to send a string instead of an object. So it wasn't proper JSON like this:
var string = JSON.stringify(suffix);
To remedy the situation I added:
var newObj = JSON.stringify({link : suffix});
This allowed my post to be successful because I was now sending an object hence the word Javascript Object Notation.
This is working for me, at the moment. The REST API I'm hitting requires a token. Yours might not, or it might be looking for some other custom header. Read the API's documentation. Note, you might need a polyfill/shim for cross browser-ness (promises). I'm doing GET, but this works for POST, too. You may need to pass an object. If you're passing credentials to get a token, don't forget window.btoa. Call it like:
httpReq('GET', device.address, path, device.token).then(function(data) {
//console.log(data);
updateInstrument(deviceId,path,data);
}, function(status) {
console.log(status);
});
function httpReq(method, host, path, token) {
if(method === "DELETE" || method === "GET"|| method === "POST" || method === "PUT" ){
var address = 'https://' + host + path;
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open(method, address, true);
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader ("X-auth-token", token);
//xhr.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded");
xhr.onload = function() {
var status = xhr.status;
if (status == 200 || status == 201 || status == 202) {
resolve(xhr.response);
}
// this is where we catch 404s and alert what guage or resource failed to respond
else {
reject(status);
}
};
xhr.send();
});
} else {
console.log('invalid method');
}
};

Categories