{"readyState":4,"status":200,"statusText":"load"} parsererror ajax local - ajax

I am practising my ajax with a json file on local computer, using google chrome. the json file is par of sources when I inspect the website but i keep getting a parsererror
hears my js code
$(function(){
$.ajax({
type: 'GET',
url: 'sample3.json',
dataType: 'jsonp',
crossDomain: true,
cache: false,
async: true,
jsonp: false,
success: function(data) {
console.log('success', data);
},
error:function(e, msg){
console.log('error')
console.log(JSON.stringify(e) + " " + msg);
}
})
})
I keep getting {"readyState":4,"status":200,"statusText":"load"} parsererror
my json file
[
{
"id": 1,
"name": "Will",
"drink": "Americano w/ Creme"
},
{
"id": 2,
"name": "Laura",
"drink": "Vanilla Macchiato"
}
]
to see what I am trying to create
https://jsfiddle.net/Anaconda2468642/rskfwucp/3/
and I am also getting this error:
error Error: myCallback was not called
at Function.error (jquery.min.js:2:2616)
at e.converters.script json (jquery.min.js:2:84147)
at jquery.min.js:2:79470
at l (jquery.min.js:2:79587)
at HTMLScriptElement.i (jquery.min.js:2:83436)
at HTMLScriptElement.dispatch (jquery.min.js:2:43064)
at HTMLScriptElement.v.handle (jquery.min.js:2:41048)

Related

Getting 400 Bad Request Response from Facebook Graph API using jQuery.ajax

I want to send a message whenever a button is clicked, but I'm getting 400 Bad Request Errors. It works fine when I do it in Postman.
Here's my jQuery.ajax code:
$.ajax({
method: "POST",
url: 'https://graph.facebook.com/v14.0/me/messages?access_token=<MY_ACCESS_TOKEN>',
data: {
"recipient": {
"id": psid
},
"message": {
"text": "hello, world!"
}
},
contentType: "application/json",
success: function (response) {
console.log(response)
}
})

Problem with AJAX Post request in laravel

I have a select box and when each item is selected, a ajax request is sent.
but my code does not work. i'm get status 404 and this error is displayed in the console
exception: "Symfony\\Component\\HttpKernel\\Exception\\NotFoundHttpException", file: "F:\\source\\boiler\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\RouteCollection.php", line: 179, …
my route :
Route::group(['namespace' => 'BuyCrypto' , 'prefix' => 'crypto'], function() {
Route::post('/calculateBuyAmount' , [BuyCryptoController::class , 'calculateAmount'])->name('calculate.amount');
});
ajax code :
$("select#user_select_crypto").change(function(e) {
$('#calculat_user_buy').block({
message: '<i class="icon-spinner4 spinner"></i>',
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'transparent'
}
});
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
e.preventDefault();
$.ajax({
url: "panel/crypto/calculateBuyAmount",
dataType: 'json',
data: {
user_select_crypto: $("input[name=user_select_crypto]").val(),
user_value_request: $("input[name=user_value_request]").val(),
},
success: function(result) {
console.log(result)
},
error: function(result) {
console.log(result)
},
});
});
what is problem?
this is because laravel not getting the full URL of your giving route. you have to give the correct route. for this, you can use your named route like below.
url: "{{ route('calculate.amount') }}",
or in case you are in a javascript file and can't use blade than just give URL with / slash. all is going to work. Its happen with a post request.
you can give URL like below
url: "/panel/crypto/calculateBuyAmount",
Updated
Now you facing methodNotAllowedException because now you sending a get request because you are not mentioning in ajax side you are doing a post request. by default ajax will send a get request. so you need to tell ajax use post method. like that type: "POST" like below
$.ajax({
url: "/panel/crypto/calculateBuyAmount",
dataType: 'json',
type : 'POST'
data: {
user_select_crypto: $("input[name=user_select_crypto]").val(),
user_value_request: $("input[name=user_value_request]").val(),
},
success: function(result) {
console.log(result)
},
error: function(result) {
console.log(result)
},
});
In this kind of situation, it is good to use named route as you give your route a name.
$.ajax({
url: "{{ route('calculate.amount') }}", // use your name route here
type : 'POST', // need to add your request type post
dataType: 'json',
data: {
user_select_crypto: $("input[name=user_select_crypto]").val(),
user_value_request: $("input[name=user_value_request]").val(),
},
success: function(result) {
console.log(result)
},
error: function(result) {
console.log(result)
},
});

How to properly send an Ajax Post request for creating fusion tables using google OAuth2?

I am trying to create a fusion table using the documentation provided by Google fusion table REST API https://developers.google.com/fusiontables/docs/v2/using.
I am sending an ajax request in the following format
$.ajax({
type: "POST",
crossDomain: true,
contentType: "application/json",
url: "https://www.googleapis.com/fusiontables/v2/tables",
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", token);
},
data: {
access_token: token,
"name": "Insects",
"columns": [
{
"name": "Species",
"type": "STRING"
},
{
"name": "Elevation",
"type": "NUMBER"
},
{
"name": "Year",
"type": "DATETIME"
}
],
"description": "Insect Tracking Information.",
"isExportable": true
},
async: false,
success: function(result){
alert(result);
},
error: function(result) {
alert('error');
}
});
But I am getting a 401 error. I tried setting Bearer , token in the authorization header but still no success.Any pointers will be much appreciated.Thank you
I solved my issue with:
xhr.setRequestHeader("Authorization", "Bearer "+ token);

How can I get imgur.com album images using ajax request

I used this code :
(function($){
var albumID = 'NNbeO';
var albumAPI = "https://api.imgur.com/3/album/" + albumID + "/images";
$.ajax({
url: albumAPI,
headers:{
'Authorization':'xxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
},
type: 'GET',
dataType: 'json',
success: function(data) {
alert(data.data[0].link);
},
error: function() { console.log("ERRORZ"); }
});
})(jQuery);
But I got this error :
{
"data": {
"error": "Malformed auth header",
"request": "\/3\/album\/NNbeO\/images",
"method": "GET"
},
"success": false,
"status": 403
}
I got my solution. It works fine now. Below is my working code. It's problem was, I've not added Client-ID text with Authorization headers.:
(function($){
var albumID = 'NNbeO';
var albumAPI = "https://api.imgur.com/3/album/" + albumID + "/images";
$.ajax({
url: albumAPI,
headers:{
'Authorization':'Client-ID xxxxxxxxxxxxx'
},
type: 'GET',
dataType: 'json',
success: function(data) {
alert(data.data[0].link);
},
error: function() { console.log("ERRORZ"); }
});
})(jQuery);

Ajax Post Create Features Google Maps Engine API

So here is my code, i've already made the oauth handshake, and that has given me the authentication token which i'm including in my header. I am simply trying to batch insert some features into an existing table. I keep getting a 400 "parseError" - This API does not support parsing form-encoded input.
Here's some of my code. I have no idea where i'm derping any ideas.
$(document).ready(function(){
$('.pickTrip').bind('click', function(){
var pointData = {
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-87.397980,
44.795067
]
},
"properties": {
"gx_id": "1242342",
"name": "Jimmy Choo",
"phone": "(920)555-4242",
"email": "jchoo#aol.com",
"vehicle": "mazda, b2300, 1994"
}
}
]
};
console.log(pointData);
var url = "https://www.googleapis.com/mapsengine/v1/tables/{table id}/features/batchInsert";
jQuery.ajax({
type: "POST",
url: url,
data: pointData,
dataType: 'application/json',
headers: {
'Authorization': 'Bearer ' + authResult.access_token
},
success: function(response) {
// Log the details of the Map.
console.log(response);
},
error: function(response) {
response = JSON.parse(response.responseText);
console.log("Error: ", response);
}
});
});
});
jQuery takes the object provided in the 'data' parameter and turns the key/value pairs into an encoded query string. You will want to send the raw JS object and make sure it's not marked as form encoded. To do that, change the 'dataType' parameter to 'contentType' and update the data value to take the "stringified" version of the JSON object.
Like this:
data: JSON.stringify(pointData),
contentType: 'application/json',

Resources