I am trying to post data (base64 string) to server. when I JSON.stringify the data on console log. I am getting blank output and i am not able to send the data to server.
my ajax code is
base64String=[{data:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ....."}](long string)
$.ajax({
url: "http://localhost:3000/",
type: "PUT",
data: JSON.stringify(base64String),
contentType: "application/json",
success: function (response) {
console.log(response);
},
error: function(jqXHR, textStatus, errorThrown) {
alert(errorThrown)
}
});
a string isn't json. Yu would need to do somethng like:
{ string: <base64> }
Related
The JSON response body of the HTTP request is being distorted on the server side. It has one key and its element is an array. This is my HTTP request using jQuery ajax:
function dbInsert(event_arr) {
$.ajax({
url: "http://localhost:5000/insertdata",
type: "POST",
data: JSON.stringify(event_arr),
success: function(events) {
console.log("TestInsert was successfully executed");
},
error: function(textStatus, errorThrown) {
console.error("The following error occurred: " + textStatus, errorThrown);
}
});
When I print JSON.stringify(event_arr) to console, this is what it looks like:
{"results": [{"event_client": "name1","event_date": "date1"}, {"event_client": "name2", "event_date": "date2"}]}
Then, on the server side, here are my various attempts at understanding the response body and playing around with the JSON format:
// returns [object, Object], cannot be passed into JSON.parse
console.log(request.body);
var temp = JSON.stringify(request.body);
var temp2 = JSON.parse(temp);
// prints {"{\"results\":":{"{\"event_name\":\"name1\",\"event_date\":\"date1\"},{\"event_name\":\"name2\",\"event_date\":\"date2\"}":""}}
console.log(temp);
// prints { '{"results":': { '{"event_name":"name1","event_date":"date1"},{"event_name":"name2","event_date":"date2"}': '' } }
console.log(temp2);
The JSON.stringify() that was called in my dbInsert() seems to mess up how the JSON is read, and I don't how to work around this internal formatting error!
You need to set: contentType: "application/json", in your $.ajax({}) function.
Something like this:
function dbInsert(event_arr) {
$.ajax({
url: "http://localhost:5000/insertdata",
type: "POST",
data: JSON.stringify(event_arr),
contentType: "application/json",
success: function(events) {
console.log("TestInsert was successfully executed");
},
error: function(textStatus, errorThrown) {
console.error("The following error occurred: " + textStatus, errorThrown);
}
});
}
I'm dealing with the todoist API (https://developer.todoist.com/) and I am making a jquery ajax get request for some data with this:
var url = "https://todoist.com/API/v7/sync";
var data = {
'token' : token,
'resource_types' : '["all"]',
};
$.ajax({
url: url,
data: data,
type: 'GET',
dataType: 'jsonp',
success: function(response) {
console.log(response);
},
error: function(response) {
console.log('error');
},
});
Now, when I get the response, I get the error
Unexpected token :
Why? Because according to (https://stackoverflow.com/a/7941973/2724978) jQuery is expecting a jsonp formatted response, but it returns json.
I've researched all over for how to solve this, and the response would be: "Return the data in jsonp format".. well. It's an external API and they don't provide data in JSONP. Is there a way I could override the returned function and parse this JSON data anyway?
Your dataType should be json, not jsonp.
As elektronik pointed out the dataType should be json and not jsonp. The code than looks as following ...
var token = "your token"
var url = "https://todoist.com/API/v7/sync";
var data = {
'token' : token,
'resource_types' : '["all"]',
};
jQuery.ajax({
url: url,
data: data,
type: 'GET',
dataType: 'json',
success: function(response) {
console.log(response);
},
error: function(response) {
console.log('error');
},
});
I'm making a cross domain ajax call. When I heat the link directly from my browser, I get the json strin as follows:
But when I'm making an ajax call to this same URL, I'm not getting the json in my response. My ajax request is as follows:
$.ajax({
url: "http://172.16.201.14:801/api/apiclearing?trackNo=" + $scope.BillClearingModel.BillTrackingNo + "&&tokenNo=~Ice321",
dataType: 'jsonp',
success: function(response) {
console.log(response);
alert("Success");
},
error: function(response) {
console.log(response);
alert("Failed");
}
});
What Im getting in console is as follows:
Full Object is as follows:
What I'm missing here? Thanks.
Would you mind trying this:
var datastring = { "trackNo" : "160822000037" };//try this
//var datastring = "trackNo=160822000037"; //or this
$.ajax({
type: 'POST',//you may try the GET type
url: "https://172.16.201.14:801/api/apiclearing",
dataType: 'json',// try jsonp as well
data: datastring,
contentType: 'application/json',
crossDomain: true, //newly added
success: function(data, status, jqXHR) {
console.log(data);
console.log(status);
console.log(JSON.stringify(data));//to string
alert("Success");
},
error:function(jqXHR, textStatus, errorThrown) {
alert("Status:"+ textStatus + " Error:" + errorThrown);
}
You may consider as well to add Access-Control-Allow-Origin to your server like Access-Control-Allow-Origin: http://yourdomain-you-are-connecting-from.com in php
I have a situation where I am building the json data to post dynamically. so I create it in a for loop and then attempt to use the $.ajax command, but on the server side the model is null. If I hard code the data section as would be normal, it works fine. I tried the same process with a simple model just to check and the same happens.
So this works:
$.ajax({
url: '#Url.Action("SetupQuestions", "Login")',
type: 'POST',
dataType: 'json',
cache: false,
data: {SharedSecret: 'Bob'},
success: function (data, status, xhr) {
$('#divMFAQuestion').html(data).fadeIn('slow');
},
error: function (xhr, status, error) {
alert("MFA Challenge Error (b): " + error);
}
});
But this doesn't:
var datastring = '{SharedSecret: Bob}';
$.ajax({
url: '#Url.Action("SetupQuestions", "Login")',
type: 'POST',
dataType: 'json',
cache: false,
processData: false,
data: JSON.stringify(datastring),
success: function (data, status, xhr) {
$('#divMFAQuestion').html(data).fadeIn('slow');
},
error: function (xhr, status, error) {
alert("MFA Challenge Error (b): " + error);
}
});
Nor this:
var datastring = 'SharedSecret: Bob';
Any thoughts?
You have quotes around your entire JSON data structure:
var datastring = '{SharedSecret: Bob}';
JSON.stringify expects a JSON structure, so the quotes should only be around the string part for JSON.stringify to work:
var datastring = {SharedSecret: 'Bob'};
However, the reason that your AJAX call is not working is that the data parameter accepts a JSON data structure. JSON.stringify will serialize it as a string, which data does not expect. So you need to just pass the fixed datastring without JSON.stringify.
data: datastring
I want to get base64 data and i have a url which will be give me the file.
I have tried the below mentioned way to get base64 data from URL
I have made a ajax call to the the given URL
$.ajax({
type: "GET",
url: DownloadUrl,
success: function (data, textStatus, jqXHR){
if (data){
}
},
error: function (xhr, statusText, errorThrown) {
console.log(statusText);
}
});
In the success event, i am getting some decoded data, I have encoded that using "window.btoa". But now my file is getting corrupted after this way.
Is this the right way to get base64 data?
Any other Way to get this data?
Did you try to call encodeURIComponent on the returned data?
$.ajax({
type: "GET",
url: DownloadUrl,
success: function (data, textStatus, jqXHR) {
if (data) {
data = btoa(encodeURIComponent(data));
}
},
error: function (xhr, statusText, errorThrown) {
console.log(statusText);
}
});