I'm trying to send a post request to a node server.
This is my client-side code:
function send(userid,message){
$.ajax({
method: "POST",
url: "/chat/messages?id="+userid+'&message='+message
})
clear();
}
This is my server side code:
app.post('/chat/messages',function (req,res){
var query = url.parse(req.url,true).query
insertMessage(query.id,query.message)
})
This works, however I'm not sure getting data in the query string using post is the right way to go.
I tried adding a data field in $ajax parameter:
function send(userid,message){
$.ajax({
method: "POST",
url: "/chat/messages"
data : {'id' : userid, 'message' : message}
})
clear();
}
And using bodyParser() in the server end to parse the body contents:
app.use(bodyParser.json())
app.post('/chat/messages',function (req,res){
console.log(req.body)
})
but when I log the response, the body{ } object is always empty.
Why is that?
Is a <form> tag necessary for POST requests?
I tried editing my ajax request to use json as the dataType and stringifying the data, but the req.body is still empty.
$.ajax({
method: "POST",
url: "/chat/messages",
data : JSON.stringify({'id' : userid, 'message' : message}),
dataType: 'json',
})
When you post data to a server, the data is usually urlencoded and added to the body of the request. In your example, it would look like this:
id=<userid>&message=<message>
Therefore, the bodyparser you need to be able to parse that is bodyparser.urlencoded()
app.use(bodyParser.urlencoded())
Note that it isn't always urlencoded, it all depends on what you are using to send the post. AngularJS for example defaults to sending it as json instead. The good news is you could simply add both bodyparsers and your route won't need to know which method was used since in both cases the data would end up on req.body with key/value pairs.
You should read the express documentation. http://expressjs.com/api.html#req
// For regular html form data
app.use(bodyParser.urlencoded())
app.post('/chat/messages',function (req,res){
console.log(req.body);
console.log(req.query.id);
console.log(req.query.messages);
})
You can also do req.params
app.post('/chat/messages/:id',function (req,res){
console.log(req.body);
console.log(req.query);
console.log(req.params.id)
})
Related
I am trying to make an ajax call from client to server with some data and want to access the data on the server.
Client:
$('#searchName').blur(function(){
$.ajax({
url: "/getcontact",
type:"GET",
dataType:"json",
data: {
name: "Malek"
},
contentType: "application/json",
success: function( result ) {
$( "#mob" ).value=result;
}
});
});
Server:
app.get("/getcontact",function(req,res){
console.log("===="+req.body.data+"====");
})
I am not able to get the value of name in req.body. If I console the req.body it is showing as [object Object] and when consoling req.body.data it is showing as undefined.
I have imported body-parser.
req.body is meant to hold request payload and not query strings.
You should use req.query instead, since you are making a GET request and not a POST/PUT/PATCH request.
update: I would like to pass the var value to the server
hello,
same old, same old ... :)
I have a form called <form id="testForm" action="javascript:test()"> and a code area called <code id="testArea"></code>
I am using this code to stringify and display the data in the code area:
var formData = form2object('testForm');
document.getElementById('testArea').innerHTML = JSON.stringify(formData, null, '\t');
var value = JSON.stringify(formData, null, '\t');
What I want is to send this data to a JSON file.
I've been working on this project : http://ridegrab.com/profile_old/ and if you press Submit Query button you will see the head of the page populate.
Also I want use this piece of script to send data:
function authenticate(userName, password) {
$.ajax
({
type: "POST",
//the url where you want to sent the userName and password to
url: 'username:password#link to the server/update',
dataType: 'json',
async: false,
//json object to sent to the authentication url
data: '{"userName": "' + userName + '", "password" : "' + password + '"}',
success: function () {
alert("Thanks!");
}
})
}
Again, all I want is to be able to send that JSON data to the server. My server is set up to update or POST the data in the right place.
You post JSON like this
$.ajax(url, {
data : JSON.stringify(myJSObject),
contentType : 'application/json',
type : 'POST',
...
if you pass an object as settings.data jQuery will convert it to query parameters and by default send with the data type application/x-www-form-urlencoded; charset=UTF-8, probably not what you want
'data' should be a stringified JavaScript object:
data: JSON.stringify({ "userName": userName, "password" : password })
To send your formData, pass it to stringify:
data: JSON.stringify(formData)
Some servers also require the application/json content type header:
contentType: 'application/json'
There's also a more detailed answer to a similar question here: Jquery Ajax Posting JSON to webservice
In case you are sending this post request to a cross domain, you should check out this link.
https://stackoverflow.com/a/1320708/969984
Your server is not accepting the cross site post request. So the server configuration needs to be changed to allow cross site requests.
let's say I have this route for my rendered HTML:
app.get('/profile/:id', function (req, res) { // my route
res.render('profile', { id: Number(req.params.id) }); // render the file and set a variable
});
and in my client side javascript file for the profile page I want to get data from the server. I request the data when loading the page by sending a user id to the server and the server returns a user object:
$(document).ready(function() {
var user = null;
$.ajax({
type: 'GET',
url: '', // This one is missing here
dataType: 'json'
}).done(function(data){
user = JSON.stringify(data);
});
console.log(user.name);
});
And my server would handle this function:
app.get('', function (req, res) { // missing route
var userId = ; // This is missing
var userObj = getUserById(userId);
res.send(userObj);
});
What route do I have to use? Tutorials say I have to pass in the route like /profile/:id but this route already exists?
I tried defining a new route like:
app.get('/reqUser/:id', function (req, res) { // Ajax route
res.send(getUserById(Number(req.params.id)));
});
and for my Ajax call I pass in the url http://localhost:8888/reqUser/12345 but this seems to be wrong because user is still null after using the Ajax call.
So how can I define a route handling the page and the Ajax call?
Edit: First off, you'll want to fix the bug in your client-side JS, where you are attempting to print user.name before user has been fetched from the server. You can fix this by moving your console.log statement into the done() callback like so:
$(document).ready(function() {
var user = null;
$.ajax({
type: 'GET',
url: '', // This one is missing here
dataType: 'json'
}).done(function(data){
user = JSON.stringify(data);
console.log(user.name); // log here
});
});
Regarding your routes question, you have several options. Below are two common solutions to this problem:
Create a separate api route to distinguish your API requests from your page requests. For example, app.get('/api/profile/:id, (req, res) => {...});'
Add a URL parameter to your AJAX calls specifying the format you want the response to be in, with the default being the page's HTML. For example, your AJAX would send a GET request to the URL /profile/2012?format=json, which would return the profile's information in JSON.
Personally, I prefer the first option, as it makes intent more clear.
lets say I have
router.get('/read', function(request, response) {
res.send({"result": "Success sent from routes/index.js."});
});
how do I output a template with the data. If I use res.send() I can't use res.render() right?
If my users are at /read and click a button to send some data with ajax I want to display that data in another template on /read
Edit: One way to get around this is to make a string when you return the data (or maybe not)
success : function(data){
$(".fillIn").html("<p style = 'color:green;'>" + data + "</p>")
}
I don't want a string.
The pic shows that on one page "/" there are 2 buttons and by clicking each button you can send data and that data can be displayed on the right depending on which button was clicked, a form with some data filled in or a table filled in with some data. I use ajax to send the data on click..There will be different forms with different styles. That's why I want to add in a template. I could do that with HTML using .load() I think but I cant figure out how do with that jade.
Here's my other Question
In your index.js file, use the following to capture GET and POST requests and render different responses:
app.get('/read', function(req, res, next){
res.render('emptyFormTemplate');
});
app.post('/read', function(req, res, next){
res.render('dataTableTemplate', {
name: req.body.name,
email: req.body.email
});
});
On the client-side, you you can something like this to POST the data to /read. You would include this script in emptyFormTemplate in the above example.
$('#myForm').submit(function(event){
var formData = {
'name' : $('input[name=name]').val(),
'email' : $('input[name=email]').val()
};
$.ajax({
type: 'POST',
url: '/read',
data: formData,
dataType: 'json'
});
});
I'm new to the nodeJS Express framework. I'm consuming a POST request that I sent using the following:
router.post('/', function(req, res) {
var data = Object.getOwnPropertyNames(req.body)[0];
});
I've sent this data from the client via:
$.ajax({
url: "write_to_region",
type: "POST",
data: JSON.stringify(grid)
});
where "grid" is a 2d array of values.
My express body parser is configured as follows:
app.use(bodyParser.urlencoded({limit: '50mb', extended: false }));
What is a better or more idiomatic way of doing this?
Note that the array is somewhat large (10kb) and contains only integers. Ideally, I would be minimizing the amount of data sent in the request.
Thanks!!
The problem is that you're not setting the appropriate Content-Type. Jquery's default Content-Type for POSTing data is application/x-www-form-urlencoded. So the body parser starts reading the request data, looking for an = to know when the "key" ends and the "value" starts. It never finds an = so it keeps appending to the key name.
To fix this you need to add these options in your $ajax() config:
contentType: "application/json; charset=utf-8",
dataType: "json",
and add the bodyParser.json() middleware:
app.use(bodyParser.json());