To all whom it may concern (I am really just trying to reach the "please add more detail" limit)
When passing data to the server as below the body is shown as empty.
Server
// POST method route
app.post('/pass', function (req, res) {
console.log("server received POST from homepage")
console.log(req.body)
res.send('POST request to the homepage')
})
Client
function ajaxJSONFunc(){
var inputData = document.getElementById('input2').value
var json = {"data":"abc"};
$.ajax({
url: "/pass",
type: "POST",
data: json
contentType: "application/json",
// dataType: "json", only use if you need to responce data to be JSON, if its not JSON an error will fire when uncommented. defaults to text
success: function(data) {
console.log("data passed back from server is:" + data)
},
error: function(err) {
console.log("an error occured")
console.log(err)
}
})
}
Works when passing like this (below), but I would prefer to send JSON data and not strings
$.ajax({
url: "/pass",
type: "POST",
data: inputData,
contentType: "application/x-www-form-urlencoded",
//dataType: "json", only use if you need to responce data to be JSON, if its not JSON an error will fire when uncommented. defaults to text
success: function(data) {
console.log("data passed back from server is:" + data)
},
error: function(err) {
console.log("an error occured")
console.log(err)
}
})
You defined contentType: "application/json". That's means you have to send a json object.
You have to use JSON.stringify() method.
data: JSON.stringify(json)
JSON.stringify function turns a Javascript object into JSON text and stores it in a string.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var json = "abc";
$.ajax({
url: "/pass",
type: "POST",
data: json,
contentType: "application/json",
// dataType: "json", only use if you need to responce data to be JSON, if its not JSON an error will fire when uncommented. defaults to text
success: function(data) {
console.log("data passed back from server is:" + data)
},
error: function(err) {
console.log("an error occured")
console.log(err)
}
});
});
</script>
</head>
<body>
</body>
</html>
Related
I am trying to make a post call through ajax from my front end to my express server, but I am getting the error net::ERR_UNKNOWN_URL_SCHEME. The code for ajax is below
function sendSteps(encodedLatLangs) {
$.ajax({
url: 'localhost:3000/route',
type: "POST",
dataType: "jsonp",
contentType: "jsonp; charset=utf-8",
crossDomain:true,
data: JSON.stringify({
steps: encodedLatLangs
}),
success: function (response) {
console.log(done);
},
error: function (request,error) {
console.log('Ajax call gave an error');
}
})};
My console is showing this.
This is how I am handling post request to this endpoint on backend
router.post('/route',function (req, res) {
console.log("Hello Received the Data");
res.send("Hello Received the Data");
//Doing something with the received data
});
Can some throw any light on this.
Thanks.
With JSONP you can sending only GET request (JSONP insert script tags into the DOM).
Your data should be a &key=value string and contentType is application/javascript
Try it:
function sendSteps(encodedLatLangs) {
$.ajax({
url: 'localhost:3000/route',
dataType: "jsonp",
contentType: "application/javascript; charset=utf-8",
crossDomain: true,
data: 'steps=' + encodeURIComponent(JSON.stringify(encodedLatLangs)),
success: function (response) {
console.log(done);
},
error: function (request, error) {
console.log('Ajax call gave an error');
}
});
};
Or use JSON (if you are a server owner and can set up CORS).
It can be done by setting "Access-Control-Allow-Origin" in response header.
Something like this. For more details visit https://enable-cors.org/server_expressjs.html
And also we have to remove "data type" and "content type" from the ajax request.
router.route('/route')
.post((req, res, next) => {
controllers
.post(req.body)
.then(data => {
res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
res.send(message.generateMessage(200, '', data))
})
.catch(err => next(err))
})
I've been having a problem all day sending json data via ajax to Express.
My ajax looks like this:
$('#saveClause').click(function () {
var username = document.getElementById('postUserName').innerHTML;
var clauseTitle = document.getElementById('modalTitle').innerHTML;
var clauseDescription = document.getElementById('modalDescription').innerHTML;
var clauseText = document.getElementById('modalText').innerHTML;
$.ajax({
url: "/classes/updateAssignment",
type: "post",
dataType: "json",
data: {
username: username,
title: clauseTitle,
description: clauseDescription,
text: clauseText
},
cache: false,
contentType: "application/json",
complete: function () {
console.log("complete");
},
success: function () {
console.log("success");
},
error: function () {
console.log("Process Error");
}
});
});
and my Express Classes routes looks like this:
router.post('/updateAssignment', function (req, res) {
console.log(req.body.username)
console.log(req.body.title);
console.log(req.body.description);
console.log(req.body.text);
res.type('json');
res.send({
some: JSON.stringify({
response: 'json'
})
});
});
I issued a postman post request to the url with this JSON object:
{
"username":"testing",
"title":"123",
"description":"j456",
"text":"seven"
}
and Express logged all the details in the console just fine, so it must be a problem with my ajax request as it's giving me an unexpected token u error but I don't know what's causing it. Any ideas?
Try removing the contentType: "application/json",
If you used postman with no headers, most likely this is causing the parser to fail.
I just started working with .net and I can give complete webapi endpoint urls to make AJAX calls or give relative url. How does client project know where to locate webapi endpoints when using relative URL ?
Client AJAX current call:
$.ajax({
url: localhost:3227/api/form/post,
contentType: "application/json; charset=UTF-8",
type: "POST",
dataType: "json",
data: JSON.stringify(formData),
success: function (resp) {
console.log("Updated successfully!"); },
error: function (request, status, error) {
console.log(request.responseText + ' Error:' + error.message);
}
});
What I want to do:
$.ajax({
url: /api/form/post,
contentType: "application/json; charset=UTF-8",
type: "POST",
dataType: "json",
data: JSON.stringify(formData),
success: function (resp) {
console.log("Updated successfully!"); },
error: function (request, status, error) {
console.log(request.responseText + ' Error:' + error.message);
}
});
How does AJAX call know where localhost:3227/api/form/post is if I remove localhost:3227 and only keep /api/form/post
Is it in some project configuration that I don't know about ?
In config file add,
var api_url = localhost:3227;
and then,
$.ajax({
url: api_url+ '/api/form/post',
contentType: "application/json; charset=UTF-8",
type: "POST",
dataType: "json",
data: JSON.stringify(formData),
success: function (resp) {
console.log("Updated successfully!"); },
error: function (request, status, error) {
console.log(request.responseText + ' Error:' + error.message);
}
});
I try send a binary file with jquery to node js.
This is my jquery code:
$('#addLabel').click(function(){
$.ajax({
url: "http://127.0.0.1:3030/label/66806",
type: 'PUT',
data: files,
contentType: 'application/octet-stream',
dataType: 'binary',
contentType: false,
processData: false,
success: function (data) {
console.log("sent file");
},
error: function (xhr, status, error) {
console.log("error " + status + " " + error);
}
});
});
var files;
$('input[type=file]').on('change', prepareUpload);
function prepareUpload(event)
{
files = event.target.files;
}
For example I need only show in console a data like below:
update(id, data, params) {
console.log(data);
return Promise.resolve(data);
}
Firebug show me that a data was sent but node show me only {}. Sent data are empty. What is wrong?
I have JSON data sending to server. When I submit the for it is printing the data in console but not sending to the server.
It gives the following error
POST http://localhost:8080/rest/review/createReview 400 (Bad Request)
Here is my code
var promise = jQuery.ajax({
url: 'http://localhost:8080/rest/review/createReview',
type: 'POST',
data: '{myReview: myReview}',
dataType: "text",
contentType: "application/json",
success: function (data) {
console.log("Request successful", data);
},
error: function (data) {
console.log("Request failed", data);
}
});
It may be that your data is not valid JSON. Try:
data: JSON.stringify({myReview: myReview})