Cross domain ajax causing issues to render data - javascript

I trying to capture data from an HTML form which will be placed on another website. From that form I need to capture data into my website. But when I tried jQuery Ajax call for cross domain it shows me 302 error with no response.
I've tried this
$('button[type="button"]').on('click', function(){
var data = $('.data-capture-form').serialize();
$.ajax({
type : 'POST',
url: 'http://prospectbank.co.uk/leads/test',
dataType: 'jsonp',
crossDomain : true,
data : data,
contentType: 'application/jsonp'
}).done(function(res){
var resp = $.parseJSON(res);
console.log(resp);
});
});
Where is problem with this code? Any help?
Fiddle Code

If you have access to the server, add the following header:
Access-Control-Allow-Origin: *
And then make JSONP calls
$.ajax({
type: "POST",
dataType: 'jsonp',
...... etc ....
If you do not have access to the external server, you have to direct the request to your server and then make a proxied call to the external server.

Related

Jquery - send post attributes to another domain

I'm trying to send POST attributes from client to server in another domain.
Since simple json dataType won't work in a cross domain,
i've tried with JSONP
<script>
var lookup = {'username':'admin'}
$.ajax({
url: "https://somesite.com/router.php",
type: "post",
data: JSON.stringify(lookup),
dataType: "jsonp",
success: function(response) {
alert(response);
},
failure: alert("failed")
});
</script>
But then it send it as GET and not POST.
This is how it looks like in Fiddler:
Request URL: https://somesite.com/router.php?callback=jQuery172016627637017518282_1429096551228&{%22username%22:%22admin%22}&_=1429096552070
Request Method: GET
Status Code: 500
Query Url
callback: jQuery172016627637017518282_1429096551228
_: 1429096552070
So how can i send this paramter (username=admin) to a cross domain as POST?
Thanks.
You must add method: 'POST' to your ajax call otherwise jQuery appends your data object to the URL (GET parameters)
Source
You can send request from controller or configure target server to accept request.
i.e. in .htaccess
<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: *
</ifModule>

jquery ajax returns status code 0 while requesting cross domain

i am trying to make cross domain request but server can not response with
Access-Control-Allow-Origin: *
i am trying to read response header.
when i am trying to read status code or ready state it returns 0. my code for ajax request is as follows.
$.ajax({
url: "https://accounts.google.com/o/oauth2/auth",
type: "POST",
data: {"response_type":"token","client_id":"6720XXXXXXX.apps.googleusercontent.com","redirect_uri":"http://localhost:51967/oauth2callback.aspx","scope":"https://www.googleapis.com/auth/calendar","state":"this is state information","approval_prompt":"auto"},
crossDomain: true
}).always(function(jqxhr,testStatus,errorThrown)
{
alert(jqxhr.readyState);
alert(jqxhr.status);
});
thanks in advance
have you try this jquery crossdomain plugin?
another way is using jsonp as response type
$.ajax({
url: "https://accounts.google.com/o/oauth2/auth",
type: "POST",
dataType: 'jsonp',
...

Get prayer time JSON data using JQUERY and Ajax

I want to READ JSON data using Jquery ana Ajax from this link
http://praytime.info/getprayertimes.php?lat=31.950001&lon=35.9333&gmt=180&m=3&y=2013&school=0&format=json&callback=?
and this is my code:
$(document).ready(function() {
var strUser ="http://praytime.info/getprayertimes.php?lat=31.950001&lon=35.9333&gmt=180&m=3&y=2013&school=0&format=json&callback=?";
$.ajax({
url: strUser ,
dataType: 'jsonp',
success: function(data){
jQuery.each(data, function(){
alert("yes");
});
}
});
});
I tried this code with other links , and it's correct, but from the specified link I don't get any out put, can you help me??
The url you are trying to access with JSONP doesnot support it. The server will need to return the response as JSON, but also wrap the response in the requested call back. So a way to solve this problem is using a server side proxy, which fetches the response from the specified url and passes it on to your client side js, like:
$.ajax({
type: "GET",
url: url_to_yourserverside_proxy,
dataType: "json",
success: function( data ) {
console.log(data);
}
});
where
url_to_yourserverside_proxy is a server side file that fetches response from the url specified
URL is outputting json but for cross domain need jsonp.
Not all API's provide jsonp. If cross domain API doesn't provide jsonp and isn't CORS enabled you will need to use a proxy to retrieve data due to same origin policy

Rails: Get remote page via ajax

I use Rails3 and I try to get remote page via ajax. (https://play.google.com/store/apps/details?id=).
$.ajax({
url: app_url,
type: 'GET',
data: "id=<id>",
crossDomain : true,
dataType: 'jsonp',
success: function ( code ) {
alert("Good.");
}
});
When I run the script, the I see: "Uncaught SyntaxError: Unexpected token < " error message.
By the way, I tried do it as:
$.ajax({
url: app_url,
type: 'GET',
data: "id=<id>",
crossDomain : true,
dataType: 'jsonp',
success: function ( code ) {
alert("Good.");
}
});
But I see "Origin http://example.com:3000 is not allowed by Access-Control-Allow-Origin." error message.
How can I fix the error and get the page ?
Thanks.
If you are trying to access remote pages via AJAX, that page may be blocking your request. The error message would suggest this: https://developer.mozilla.org/en-US/docs/HTTP_access_control
EDIT
For clarity, Access-Control-Allow-Origin is the server setting which "origins" are allowed to retrieve from it. You could possibly grab this page server-side, and depending on google's level of security, you may have to spoof a browser. PHP CURL comes to mind. You would then set up an ajax call to your server script, your server would go get the page for you, then return it to you ajax call.

Paraimpu HTTP POST REQUEST

I am trying to make a http POST request from my Jquery mobile application(hosted on Amazon S3) to "http://paraimpu.crs4.it/data/new" to insert data into my sensor on the Paraimpu site. This is the request I'm making:
data = "Test";
valueToSend = '{"token":"c9d1cee6-da40-4e97-afc8-209045786b04","content-type":"application/json","data":' + data + '}';
$.ajax({
url: "http://paraimpu.crs4.it/data/new",
type: "POST",
data: valueToSend,
dataType: "json",
crossDomain: true,
contentType:"application/json",
success: function(){
alert('Success');
}
});
I keep getting
XMLHttpRequest cannot load http://paraimpu.crs4.it/data/new. Origin
"http://webappz.s3-website-us-east-1.amazonaws.com" is not allowed by
Access-Control-Allow-Origin.
I know this is because of the cross domain policy, but how can I get around this? The instructions on the paraimpu page are pretty vague and just says:
Push new sensor data doing an HTTP POST to:
http://paraimpu.crs4.it/data/new
with content like: {"token":"c9d1cee6-da40-4e97-afc8-209045786b04",
"content-type":"text/plain", "data":RAW DATA}
data = "Test";
valueToSend = '{"token":"c9d1cee6-da40-4e97-afc8-209045786b04","content-type":"application/json","data":' + data + '}';
$.ajax({
url: "http://paraimpu.crs4.it/data/new",
type: "POST",
data: valueToSend,
dataType: "jsonp", //set datatype to jsonp
crossDomain: true,
jsonp: false,
contentType:"application/json",
success: function(){
alert('Success');
}
});​
These are the parts that you were missing:
dataType: "jsonp": The type of data that you're expecting back from the server. "jsonp", loads in a JSON block using JSONP. Adds an extra "?callback=?" to the end of your URL to specify the callback. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true.
jsonp: false: Override the callback function name in a jsonp request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url. So {jsonp:'onJSONPLoad'} would result in 'onJSONPLoad=?' passed to the server. As of jQuery 1.5, setting the jsonp option to false prevents jQuery from adding the "?callback" string to the URL or attempting to use "=?" for transformation. In this case, you should also explicitly set the jsonpCallback setting. For example, { jsonp: false, jsonpCallback: "callbackName" }
More on this here: jQuery.ajax()

Categories

Resources