I am using the ajax to post the data from javascript front end to express js has backend server. How i can get the posted data, in express js api method req params. I am facing issue when i try to parse the request data below is my code.Please help me to solve this
$.ajax({
url: "http://localhost:8080/api/save_user/",
type: "POST",
crossDomain: true,
data: { name: 'Justin', number: '662***' },
dataType: "json",
contentType: "application/json",
success: function (response) {
var resp = JSON.parse(response)
},
error: function (xhr, status) {
alert("error");
}
});
Express Js server side
const express = require('express');
const path = require('path')
const os = require('os');
const app = express();
var bodyParser = require('body-parser')
app.use(bodyParser.json())
//deploy the smart contract
app.post('/api/save_user', (req, res) => {
console.log((JSON.parse(req.body)));
res.send({})
})
Error Log
SyntaxError: Unexpected token n in JSON at position 0
at JSON.parse (<anonymous>)
at createStrictSyntaxError (/node_modules/body-parser/lib/types/json.js:158:10)
at parse (/node_modules/body-parser/lib/types/json.js:83:15)
at /node_modules/body-parser/lib/read.js:121:18
at invokeCallback (/raw-body/index.js:224:16)
The problem is that jquery expect you to pass an string with the json inside. try like this:
$.ajax({
url: "http://localhost:8080/api/save_user/",
type: "POST",
crossDomain: true,
data: JSON.stringify({ name: 'Justin', number: '662***' }),
dataType: "json",
contentType: "application/json",
success: function (response) {
var resp = JSON.parse(response)
},
error: function (xhr, status) {
}
});
Related
I'm new to using nodeJS and npm modules.
Using the module twit, I can do a GET request to the Twitter API and search tweets.
var Twit = require('twit')
var T = new Twit({ `login details`})
T.get('search/tweets', { q: 'banana since:2011-07-11', count: 100 }, function(err, data, response) {
console.log(data)
})
I am trying to build a simple user browser page, where a user can enter their own query parameters. I understand that modules are server side, and we can't use them on the browser. I also can't use browserify because twitter uses Oauth method which means you can't access it from the browser.
Is there a way to pass query parameters from the browser back to the server code, and then to pass that result back to the browser?
T.get('search/tweets', { q: {user options}, function(err, data, response) {
console.log(data)
})
We can use socket.io for the streaming twitter data, but how can I use it for the REST API?
Nodejs
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const Twit = require('twit');
...
const T = new Twit(LOGIN_DETAILS);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.post('/search', function (req, res, next) {
T.get('search/tweets', {q: req.body.searchQuery, count: 100}, function (err, data, response) {
return res.json({
data: data
});
});
});
Client Side
...
$.ajax({
url: "{API_URL}/search",
type: "POST",
dataType: 'json',
data: JSON.stringify({
searchQuery: SearchQuery
}),
contentType: "application/json; charset=utf-8",
success: function (msg) {
console.log(msg);
// do something with the response
}
});
$ is jQuery, read more about jquery ajax
I want to send JSON data from client side to server side.
Client side:
function send() {
var formData = {
firstname: $("#name").val(),
lastname: $("#lastname").val()
}
console.log("sending: " + JSON.stringify(formData));
$.ajax({
type: "POST",
contentType: "application/json",
url: "/dat",
data: JSON.stringify(formData),
dataType: 'json',
success: function(customer) {
console.log(JSON.stringify(customer));
},
error: function(e) {
alert("Error!")
console.log("ERROR: ", e);
}
});
}
Server side:
app.post("/dat", function (req, res) {
console.log(JSON.stringify(req.body)); // return undefined
res.end(JSON.stringify({ "nine": 9, "ten": 10, "eleven": 11 }));
});
I tried everything, but JSON.stringify(req.body) return only undefined. Sending data from server to client side working just fine...
Any suggestions?
You're resetting app here with:
var app = express();
Remove that line.
when pressing a button this code gets executed
function submitData() {
$.ajax({
type: 'GET',
url: '/questionnaire/submit', // listen to a route
dataType: "json",
data: JSON.stringify({ // some test data
satisfactory: "house",
improvement: "bla",
rating: "this is a text"
})
}).done(function () {
$(location).attr('href', '/sendOff'); // redirect to another route
}).fail(function () {
console.log("Error");
});
}
and the server is listening on this
app.get('/questionnaire/submit', function (req, res) {
var data = req.query; // Get the data object from the Ajax call
console.log(data);
res.send(null); // Send nothing back
});
Whenever pressing the button, "Error" gets logged in the console. The Ajax call always fails.
Even when writing res.send("Success"); the client will log "Error". What am I missing?
Update:
I installed the body parser middleware and use this code now
my app.js
const path = require('path');
const express = require('express');
const exphbs = require('express-handlebars');
const bodyParser = require('body-parser');
const handlebars = exphbs.create({
defaultLayout: 'index',
extname: 'hbs'
});
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
require('./Server/Routes/questionnaire')(app);
require('./Server/Routes/sendOff')(app);
app.engine('hbs', handlebars.engine);
app.set('view engine', 'hbs');
app.use(express.static(path.join(__dirname, 'Public')));
app.listen(8888, function () {
console.log('Server running on port 8888');
});
my route
module.exports = function (app) {
app.get('/questionnaire', function (req, res) {
res.render('questionnaire');
});
app.post('/questionnaire/submit', function (req, res) {
var data = req.body;
console.log(data);
res.send(null);
});
};
and my client function
function submitData() {
$.ajax({
type: 'POST',
url: '/questionnaire/submit',
dataType: "json",
data: JSON.stringify({
satisfactory: $("#edtSatisfactory").val(),
improvement: $("#edtImprovement").val(),
rating: currentRating / ratingElements.length
})
}).done(function () {
$(location).attr('href', '/sendOff');
}).fail(function () {
});
}
And when executing the Ajax call the client still runs into .fail()
Client request is :
function submitData() {
$.ajax({
type: 'POST',
url: '/questionnaire/submit', // listen to a route
dataType: "json",
data: {
satisfactory: "house",
improvement: "bla",
rating: "this is a text"
}
}).done(function () {
$(location).attr('href', '/sendOff'); // redirect to another route
}).fail(function () {
console.log("Error");
});
}
and the server is listening on this Using bodyParser middleware in your node backend
:
app.post('/questionnaire/submit', function (req, res) {
var data = req.body; // Get the data object from the Ajax call
console.log(data);
res.end(); // Send nothing back
});
You're using a GET http method, which shouldn't take body, you should instead append your data to the back of the url. Or if you want to use a body, then switch to a POST.
url: '/questionnaire/submit?satisfactory=house&improvement=bla&rating=sometext
If you're using POST don't forget:
'Content-Type': 'application/json',
Edit: On the server you need to parse the JSON request, this is best done with a middleware called body-parser:
npm install --save body-parser
const bodyParser = require('body-parser');
app.use(bodyParser.json());
This will parse your JSON and add it to req.body.
Try this..
Client Side
function submitData() {
$.ajax({
type: 'POST',
url: '/questionnaire/submit', // listen to a route
'Content-Type': 'application/json',
data: JSON.stringify({"satisfactory": "house", "improvement": "bla", "rating": "this is a text"})
}).done(function () {
console.log('hi')
}).fail(function () {
console.log("Error");
});
}
On server Side:
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
app.post('/questionnaire/submit', function (req, res) {
var data = req.body
console.log(data);
res.send(null); // Send nothing back
});
You have to install body-parser library using following command.
npm install --save body-parser
It will log "Hi" as ajax done is called. BTW You have redirected the page to 'sendOff' in your question.
If you are not understanding anything plz comment below.
You just have to replace
dataType: "json",
with this:
'Content-Type': 'application/json'
in $.ajax request
Hope this will work.. I have tried & tested.
I am making an AJAX POST request with multiple objects to a node.js server. Although my server sends status code 200, I am still getting the error Javascript AJAX SyntaxError: Unexpected token E in JSON at position 0. Here is my POST request:
var company_id = "some_generic_id";
var president = "obama";
var postData = {
company_id : company_id,
president : president
};
$.ajax({
type: "POST",
url: '/api/test_link',
data: JSON.stringify(postData),
contentType: "application/json; charset=utf-8",
dataType: "json",
data: postData,
success: function(data, status) {
console.log('it worked!')
},
error: function(request, status, error) {
console.log(request);
console.log(status);
console.log(error);
}
});
And here is my server side code:
app.post('/api/test_link', function(req, res) {
console.log('--post data--');
console.log(req.body);
/*
prints out:
--post data--
{ company_id: 'company_id', president: 'obama' }
*/
res.sendStatus(200);
});
Here's an image from my network tab:
Does anyone know what I might be missing or why my postData has invalid syntax?
The docs on ajax call states about dataType option:
The type of data that you're expecting back from the server. "json":
Evaluates the response as JSON and returns a JavaScript object.
Since you're not returning any data from the server, your empty data is parsed as JSON, which produces the error. Simply remove dataType: "json" if you're not returning any data.
add res.writeHead(200, {"Content-Type": "application/json"}); at the beginning of app.post('/api/test_link', function(req, res) { to specify that you wanted response as json format
Remove your
res.sendStatus(200);
Since res.writeHead(200, {'Content-Type': 'application/json'}); will also set your statusCode
So it would be like this
app.post('/api/test_link', function(req, res) {
res.writeHead(200, {'Content-Type': 'application/json'});
console.log('--post data--');
console.log(req.body);
/*
prints out:
--post data--
{ company_id: 'company_id', president: 'obama' }
*/
res.send();
});
I face this error if I'm not using JSON.stringify():
$.post(url, body, res => { ... });
// Error: {message: "Unexpected token e in JSON at position 0"}
$.post(url, JSON.stringify(body), res => { ... });
My client side
$.post("http://localhost:3000/scrape",
{
data: 'something'
},
function(data, status){
console.log(data);
});
What I do in node.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.post('/scrape', function (req, res) {
console.log(req.body.data)
});
But I got undefined in console.log(req.body.data), any idea why?
Your data must be of json format. since you are using bodyParser.json().
Try setting the http header, Content-type as application/json in your $.post call and send a valid json structure as data
$.ajax({
url: "scrape",
type: "POST",
data: JSON.stringify({ someData : "someData}),
contentType:"application/json; charset=utf-8",
dataType:"json",
success: function(data){
console.log(data)
},
error: function(){
console.log('error in sending request')
}
})
console.log(req.body.data)
returns undefined because the data is in req.body you should console.log(req.body)
and add app.use(bodyParser.urlencoded({extended: false})); so that data not in json format can also be parsed.
if you want req.body.data have data then make request like
$.post("http://localhost:3000/scrape",
{
data: {data: 'something'}
},
function(data, status){
console.log(data);
});
also your request is not sending any response you need to do something like
app.post('/scrape', function (req, res) {
console.log(req.body.data)
res.status(200).json({data: reqr.body.data});
});
hope it helps :)