Unable to bind data in ajax through webapi - ajax

I am getting data by verifying through "jsonp" but it is going to error.
$.ajax({
type: 'GET',
url: _BaseUrl,
contentType: 'application/json;charset=utf-8',
processData: false,
crossDomain: true,
dataType: 'json',
success: function (data) {
sourceGrid = data;
return true;
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.error);
return false;
}
});
Error is:
XMLHttpRequest cannot load url. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin url is therefore not allowed access.

Please mention URL you are using for AJAX.. One reason could be you are using full url with http.. Try relative URL.

I have got the answer.Need to call a class which contains in detail to allow access.

Related

403 error on Ajax Post Laravel shared hosting

Site works completely OK on other hosting. That is also shared. But doesn't work on current hosting when an Ajax post request is made. The server(not app) responds with 403.
What should I do now? I used postman and it works okay. No problem in url also.
Update:
the code for ajax request:
$.ajax({
type: "POST",
url: window.location.href.split('?')[0],
data: data,
success: function(data){
window.location = data.redirect_to;
},
error: function(data){
},
dataType: 'json'
});
The problem was "not setting" content-type in headers.
I changed the code into:
$.ajax({
type: "POST",
url: window.location.href.split('?')[0],
data: JSON.stringify(data),
success: function(data){
window.location = data.redirect_to;
},
error: function(data){
},
dataType: 'json',
headers: {
'Content-Type':'application/json'
}
});
And it worked.

jquery ajax success not working

I got simple ajax call i could not get why it is not running success method despite the fact that chrome developer tools show that it is getting the response for the request.
$( document ).ready(function() {
var url_API="http://moviesapi.herokuapp.com/cinemas/find/"+"PL15RH";
$.ajax({
type: 'GET',
url: url_API,
dataType: "jsonp",
crossDomain:true,
success: function (response) {
alert(1);
}
});
});
The API doesn't support jsonp. You're getting 500 (Internal Server Error).
It does support JSON, but you're getting the classic No 'Access-Control-Allow-Origin' header is present on the requested resource CORS error. You need to explicitly send the Access-Control-Allow-Origin header on your heroku API:
Header property:
Access-Control-Allow-Origin: *
A more verbose solution: "No 'Access-Control-Allow-Origin' header is present on the requested resource"
try this:
jQuery(document).ready(function($) {
var url_API="http://moviesapi.herokuapp.com/cinemas/find/"+"PL15RH";
$.ajax({
type: 'GET',
url: url_API,
dataType: "json",
crossDomain:true,
success: function (response) {
alert(response);
}
});
});

cross domain request issue origin not allow

cross domain request issue
my ajax call code actually when i am running given url directly in browser it shows me json data but using ajax call it always shows me ajax error believe me i tried n follow many things no fruitful result from 18 days.
$.ajax({
crossDomain:true,
type: "GET",
url: 'http://taxihub.azurewebsites.net/Mobile/api/json.php?method=getCompanyList',
contentType: "application/json; charset=utf-8",
dataType: "json",
processData: false,
success: function (data) {
console.log(data);
return;
},
error: function (err) {
console.log("AJAX ERROR");
console.log(err.responseText);
}
});
you can also check this link directly u will see json data coming but i found error i dont know why
"http://taxihub.azurewebsites.net/Mobile/api/json.php?method=getCompanyList"
error: OPTIONS http://taxihub.azurewebsites.net/Mobile/api/json.php?method=getCompanyList Origin lhost:809 is not allowed by Access-Control-Allow-Origin.
please help me i am stuck here from 18 days on this issue
Remove the cross-domain and content-type part and it'll work but you'll have to do a little extra string manipulation work to put it in JSON object:
$.ajax({
type: "GET",
url: 'http://taxihub.azurewebsites.net/Mobile/api/json.php?method=getCompanyList',
dataType: "json",
success: function (data) {
console.log(data.result.getCompanyList[0].CompanyID);
return;
},
error: function (err) {
console.log("AJAX ERROR");
console.log(err);
}
});
}
Actually it seems cross-domain doesn't have any effect with or without it. I guess the server you're targeting doesn't have strict cross-domain prevention but doesn't like the JSON content-type. I'd be glad to get a more specific explanation.
EDIT I used JQuery 1.10.2 if it matters

jQuery.ajax POST request converted to GET

I have the following jQuery code:
$.ajax({
url: Url,
dataType: 'JSONP',
type: 'POST',
success: function (data, textStatus, jqXHR) {
//callback function here
},
error: function (xhr, ajaxOptions, thrownError) {
//report error
}
});
However, when i view this AJAX request in Fiddler, my request has been converted from a POST to a GET.
This is not allowed with the API I'm connecting to, as it must be a POST request.
Why is this happening?
JSONP requests can only be GETs.
Remove dataType: 'JSONP'.
dataType: 'JSONP',
is always a GET request
You cannot use POST with JSONP see https://groups.google.com/forum/?fromgroups=#!topic/jquery-dev/5-tKI-7zQvs for more detail on this.

jQuery.ajax returns 400 Bad Request

This works fine:
jQuery('#my_get_related_keywords').click(function() {
if (jQuery('#my_keyword').val() == '') return false;
jQuery.getJSON("http://boss.yahooapis.com/ysearch/web/v1/"
+jQuery('#my_keyword').val()+"?"
+"appid=myAppID"
+"&lang=en"
+"&format=json"
+"&count=50"
+"&view=keyterms"
+"&callback=?",
function (data) {//do something}
This returns 400 Bad Request (Just a reformulation of the above jQuery using .ajax to support error handling).
jQuery('#my_get_related_keywords').click(function()
{
if (jQuery('#my_keyword').val() == '') return false;
jQuery('#my_loader').show();
jQuery.ajax(
{
url: "http://boss.yahooapis.com/ysearch/web/v1/"
+jQuery('#my_keyword').val()+"?"
+"appid=myAppID"
+"&lang=en"
+"&format=json"
+"&count=50"
+"&view=keyterms"
+"&callback=?",
success: function(data)
{//do something}
I think you just need to add 2 more options (contentType and dataType):
$('#my_get_related_keywords').click(function() {
$.ajax({
type: "POST",
url: "HERE PUT THE PATH OF YOUR SERVICE OR PAGE",
data: '{"HERE YOU CAN PUT DATA TO PASS AT THE SERVICE"}',
contentType: "application/json; charset=utf-8", // this
dataType: "json", // and this
success: function (msg) {
//do something
},
error: function (errormessage) {
//do something else
}
});
}
Add this to your ajax call:
contentType: "application/json; charset=utf-8",
dataType: "json"
Late answer, but I figured it's worth keeping this updated. Expanding on Andrea Turri answer to reflect updated jQuery API and .success/.error deprecated methods.
As of jQuery 1.8.* the preferred way of doing this is to use .done() and .fail(). Jquery Docs
e.g.
$('#my_get_related_keywords').click(function() {
var ajaxRequest = $.ajax({
type: "POST",
url: "HERE PUT THE PATH OF YOUR SERVICE OR PAGE",
data: '{"HERE YOU CAN PUT DATA TO PASS AT THE SERVICE"}',
contentType: "application/json; charset=utf-8",
dataType: "json"});
//When the request successfully finished, execute passed in function
ajaxRequest.done(function(msg){
//do something
});
//When the request failed, execute the passed in function
ajaxRequest.fail(function(jqXHR, status){
//do something else
});
});
Be sure and use 'get' or 'post' consistantly with your $.ajax call for example.
$.ajax({
type: 'get',
must be met with
app.get('/', function(req, res) {
===============
and for post
$.ajax({
type: 'post',
must be met with
app.post('/', function(req, res) {
I was getting the 400 Bad Request error, even after setting:
contentType: "application/json",
dataType: "json"
The issue was with the type of a property passed in the json object, for the data property in the ajax request object.
To figure out the issue, I added an error handler and then logged the error to the console. Console log will clearly show validation errors for the properties if any.
This was my initial code:
var data = {
"TestId": testId,
"PlayerId": parseInt(playerId),
"Result": result
};
var url = document.location.protocol + "//" + document.location.host + "/api/tests"
$.ajax({
url: url,
method: "POST",
contentType: "application/json",
data: JSON.stringify(data), // issue with a property type in the data object
dataType: "json",
error: function (e) {
console.log(e); // logging the error object to console
},
success: function () {
console.log('Success saving test result');
}
});
Now after making the request, I checked the console tab in the browser development tool.
It looked like this:
responseJSON.errors[0] clearly shows a validation error: The JSON value could not be converted to System.String. Path: $.TestId, which means I have to convert TestId to a string in the data object, before making the request.
Changing the data object creation like below fixed the issue for me:
var data = {
"TestId": String(testId), //converting testId to a string
"PlayerId": parseInt(playerId),
"Result": result
};
I assume other possible errors could also be identified by logging and inspecting the error object.
Your AJAX call is not completed with the following two params.
contentType: "application/json; charset=utf-8",
dataType: "json"
contentType is the type of data you're sending
dataType is what you're expecting back from the server
In addition try to use JSON.stringify() method. It is used to turn a javascript object into json string.

Resources