We Keep Coding

Ajax post call throwing an error net::ERR_UNKNOWN_URL_SCHEME

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))
})

Unexpected Token U Ajax Syntax Error

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.

Ajax JSON empty passing

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>

How to get a binary data in feathers services?

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?

Http post returns no respose and there is no error in the request in angular js?

i am given a task to create basic CRUD app.
I am trying to insert a text using http post, but there is no data in the success method.
$http({
url: url,
method: "POST",
dataType: 'json',
data: {
Id: '201414',
Note: 'sample',
},
headers: { 'Content-Type': 'application/json; charset=UTF-8' }
})
. success(function(response) {
console.log(response); //Returns Empty
} );
what am i doing wrong?

If the server method should return a value but doesn't, probably an error occurred server-side. This error however is not passed as an argument to the success handler and doesn't throw an error in the request.
You can find out if an error occurred by attaching an error handler to the $http call.
Try the following:
$http({
url: url,
method: 'POST',
data: {
Id: '201414',
Note: 'sample'
}
})
.success((data, status, headers, config) {
console.log(status);
})
.error(function(data, status, headers, config) {
console.log(data);
});