jquery ajax post to express server get undefined data - javascript

im trying to get a form to submit some data to my express app.js without the page reloading. I thought i had the correct code but when it comes to getting the code from the ajax call to the server i get a undefined data variable.
app.js: (removed irrelevant lines)
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.get('/web_text.json',function(req, res, next){
res.sendFile(__dirname + '/web_text.json');
});
app.post('/sendEmail', function (req, res) {
console.log(req.body.data);
});
app.use('/', index);
module.exports = app;
jquery function that makes ajax call:
$('#reserve form').on('submit', function(){
event.preventDefault();
var data = {
name: $('#name').val()
};
console.log(data);
$.ajax({
url: 'http://localhost:3000/sendEmail',
data: data,
method: 'POST'
}).then(function (response) {
// Do stuff with the response, like add it to the page dynamically.
$('body').append(response);
}).catch(function (err){
console.error(err);
});
});
note the console.log()s in my /sendEmail app.post function and the one in the jquery function. the jquery one logs the correct data while the app.post one logs a undefined variable... what am i doing wrong? thanks in advance

Your jQuery is not POSTing JSON, it is sending a JS object. I would be willing to bet this is a content type issue.
You might also want to look into $('#reserve-form').serialize() to package up your form data for sending instead of trying to manually create your object.

in your app.js you didn't send the response. That is why you get undefined output. try this
app.post('/sendEmail', function (req, res) {
console.log(req.body.data);
res.jsonp({data: 'your data'});
});
Hope this will help you.

Related

expressjs display post data returns an empty object

So I'm developing a chat server using expressjs and socketio and decided to create an admin where backend built in with the node chat server itself.
const express = require("express");
const app = express();
const port = 3700;
let io = require('socket.io').listen(app.listen(port));
let socketList = io.sockets.server.eio.clients;
const path = require('path');
const bodyParser = require('body-parser');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
app.get('/login', function(req, res) {
res.render('login', { title: 'Login | Argos Chat' });
});
app.post('/login', function(req, res) {
console.log(req.body);
});
So upon login data submission, I tried to display the post data from the login form but it returns me an empty object {}
console.log(req.body);
Tried to do req.params but same result .Any help, ideas is greatly appreciated.
I tried running your code and its working fine. Maybe the way you are calling the API is not right
To support content-type: x-www-form-urlencoded you should use
app.use(bodyParser.urlencoded({ extended: true }));
and to support content-type: application/json you should use
app.use(bodyParser.json());
I think you are using form-data, for that neither of these will work. For that you may want to use formidable package. We should use form-data content type only when we are sending any images/file.
And body-parser has been merged with express. You can directly use this now
app.use(
express.json(),
express.urlencoded({ extended: false })
);
I think this might be a right solution for your problem, as everything seems to be right in your code, the error might be caused by the way you are calling the API and you are setting the headers:
https://stackoverflow.com/a/25904070/12090205
const express = require("express");
const app = express();
const port = 3700;
let io = require('socket.io').listen(app.listen(port));
let socketList = io.sockets.server.eio.clients;
const path = require('path');
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
app.get('/login', function(req, res) {
res.render('login', { title: 'Login | Argos Chat' });
});
app.post('/login', function(req, res) {
console.log(req.body);
});
I checked Its Working.

Routing an Invalid Request to a 404 Error Page

I'm trying to build a server that user will be able to enter these valid paths:
localhost:9090/admin
localhost:9090/project1
and in case the user enters anything else invalid such as these the user will be redirected to root and then to the default path localhost:9090/404.html:
How do I do it?
this is my code:
app.js
var express = require('express');
var app = express();
var path = require('path');
var routes = require('c:/monex/routes/index');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use(express.static('c:/monex/admin'));
app.use('/', routes);
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(cookieParser());
var server = app.listen(9090, function () {
var host = server.address().address
var port = server.address().port
console.log("MonexJS listening at", port)
})
route.js
'use strict';
var express = require('express');
var app = express();
var router = express.Router();
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
/* GET home page. */
router.get('/', function(req, res) {
res.render('index');
});
router.get('/:projectname', function(req, res) {
var name = req.params.projectname;
res.render('c:/monex/myprojects/' + name +'/index');
});
app.use(function(req, res, next){
res.status(404).render('c:/monex/404.html', {title: "Sorry, page not found"});
});
module.exports = router;
Expressjs has a pretty cool way of handling errors and routing them.
1/ To Confirm if project exists
We use the filesystem module to confirm if it exists, using the access API, you can read more on the module at https://nodejs.org/dist/latest-v6.x/docs/api/fs.html
var fs = require('fs') // We'll need to ask the filesystem if it exists
var projectname = 'myfolder';
// Excerpt from your code, but Modified
router.get('/:projectname', function(req, res) {
var name = req.params.projectname;
fs.access(name, fs.constants.F_OK, function(err) {
if(!err) { // directory exists
res.render('c:/monex/myprojects/' + name + '/index');
return;
}
// Directory does not exist
next({statusCode: 404});
})
});
2/ To route the error properly
From the above code, we said anytime directory does not exist in nodejs, call next with an error object, i.e next(err), the difference between next() and next(err) is that there are two types of middlewares in expressjs, the first is:
app.use("/", function(req, res, next) {})
while the second is
app.use("/", function(err, req, res, next) {})
The difference between the two is that, the first one is a normal middleware that routes requests through. But the second is called a error handling middleware. Anytime that next function is called with an argument, express jumps to route it through error handling middlewares from there on. So, to solve your problem.
You will want to solve this at the app level so that all across all routers, you can have 404 pages delivered.
In app.js
function Error404(err, req, res, next) {
if(err.statusCode === "404") {
res.status(404).render('c:/monex/404.html', {title: "Sorry, page not found"});
}
// YOu can setup other handlers
if(err.statusCode === "504") {}
}
app.use('/', routes);
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(cookieParser());
app.use(Error404);
REFERENCES
http://expressjs.com/en/guide/error-handling.html
https://www.safaribooksonline.com/blog/2014/03/12/error-handling-express-js-applications/
https://github.com/expressjs/express/blob/master/examples/error-pages/index.js
Try changing the signature of your 404 handler function
Express will use it as an error handler of just add change function parameters to: (err, req, res, next)
I also got it fixed by adding this to my app.js
app.use(function (err, req, res, next) {
res.render('c:/monex/505.html', { status: 500, url: req.url });
})
making it look like this
var express = require('express');
var app = express();
var path = require('path');
var routes = require('c:/monex/routes/index');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use(express.static('c:/monex/admin'));
app.use('/', routes);
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(cookieParser());
app.use(function (err, req, res, next) {
res.render('c:/monex/404.html', { status: 404, url: req.url });
})
var server = app.listen(9090, function () {
var host = server.address().address
var port = server.address().port
console.log("MonexJS listening at", port)
})

Upload file with multer : posr route doesn't trigger

I try to use multer to store locally files. I just want to run the sample but my app.post route is not triggered.
here is my simple code (app.js)
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var multer = require('multer');
var upload = multer({ dest: 'uploads/' });
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.get("/", function(req, res){
res.render("index", { title: 'Express' });
});
app.get("/upload", function(req, res) {
res.render("upload");
});
app.post('/upload', upload.single('upl'), function (req, res) {
// req.file is the `avatar` file
// req.body will hold the text fields, if there were any
console.log(req.file);
})
...// regular code generated by express
and my jade view is ad follow (upload.jade)
extends layout
block content
h1= title
p Welcome to upload form
form(method="post",enctype="multipart/form-data",action="/upload")
p
input(type="text",name="title", placeholder="title")
p
input(type="file",name="upl")
p
input(type="submit")
There is something I am missing but don't see what.
Thx
Ok, sorry for asking this question.
I was focused on the js file where the indentation wasn't correct in my jade file. form was empty. All p's must be inside the form.

express4.2.0 session is undefined

I am finding a trouble to set a session with node.js using express4.2.0 I show you my code and after I comment:
APP.js
var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var cookieSession = require('cookie-session');
var mainModel = require('./model/main_model');
var users = require('./routes/users');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(cookieSession({
keys: ['secret1', 'secret2']
}));
app.use('/users', users);
/*Evething that express makes automatically*/
app.listen(8080);
USERS.js
var express = require('express');
var router = express.Router();
router.get('/', function(req, res)
{
if(req.cookie && req.cookie.user) res.send("COOKIE");
else if(req.session && req.session.user) res.send("SESSION");
else res.render('users/new_user', {title:"NEW USER"});
});
/*there is more content... but not relevant. */
function makeTheUserSession(result, res)
{
result['go'] = '/users';
//res.session.user = result.result[0];
//res.cookie('user', result.result[0]);
res.send(result);
}
The function makeTheUserSession is call from the method post of '/users' (to find a users on the data base).
If I uncomment the res.session.user line, when I invoque makeTheUserSession the app breaks, stop, capito, dead (Cannot set property 'user' of undefined)...
If I uncomment the res.cookie('user', result... line, when I invke the function, and after I see the browser cookies on the settings I found a cookie called user with the values of result.result[0]... but after on the get method it doesn´t works how I expect... res never sends me "COOKIE".
I had sawn the same question many times repeated, but I didn´t see a answer that worth for me: some ones talk about connect middleware (I am using express), other say to use "app.use(express.session(keyword)) but it only works with the old version of express. The express-session module is deprecated, and I would want to use a more actuallity middleware.
I hope your answers. Thank you very much.
It's req.session not res.session, fix that and you should be good to go.

Express form parsing not working

I've been using Express.js and the body-parser module for parsing a form to the server. However, when the content is received, res.body it just shows up as an empty object.
app.js:
var express = require("express");
var app = express();
var bp = require("body-parser");
app.set('views', __dirname + '/views');
app.use(bp.json());
app.use(express.static(__dirname + '/public'));
app.get('/', function (req, res) {
res.render('index.jade');
});
app.post('/', function (req, res) {
console.log(req.body);
});
app.listen(process.env.PORT || 5000);
The form (in Jade):
form(method="post", action="/", enctype="application/json")
input(type="text", name="name", placeholder="input your name")
Why is this so and how can it be fixed?
bodyparser.json() only parses requests with JSON data. You need to use bodyparser.urlencoded():
app.use(bodyParser.urlencoded({extended: false}))
extended: false means that nested values aren't handled, e.g. foo[bar]=baz. You can switch it to true if you want to support nested values.

Categories

Resources