I have a problem with my Ajax Request I want to send to a specific page. I know that I can't just send Ajax requests to different pages because of the cross-domain problem. So I have chosen the jsonp method to do that.
My code is:
exs = function(url){
$.ajax({
type: "GET",
dataType: 'jsonp',
jsonp: "callback",
url: "http://example/api.php?callback=?",
success: function(response) {
console.log(response);
}
});
}
So what this returns is the following:
"Uncaught SyntaxError: Unexpected end of input"
Does anyone know what's the problem?
I have checked the page of the API I'm sending the request, there I see just plain HTML.
And I want to save that HTML output to a variable.
I haven't found a solution yet. Any ideas?
I know that I can't just send Ajax requests to different pages because of the cross-domain problem. So I have chosen the jsonp method to do that.
If you want to use JSONP then the server has to provide a JSONP response, not an HTML response.
You can't bypass the same origin policy without either the cooperation of the server or the use of a proxy.
If you were using JSONP, then you should specify dataType: "jsonp" not dataType: "json" and you should generally avoid specifying the name of the function using jsonp: "callback" in favour of letting jQuery generate it from the success argument.
Related
guys. I'm not familiar with API call. In this case, I would like to get the JSON data from an url provided by the client.
For example, the url could be https://test/test/test/test
and there are headers:
- partner_key: r935pokA8-98A1-r7y6-i90b-3940632d2q99
- regexkey: .*\.test\.ml.*
How should I get all the JSON data/strings stored in that url? Can I type in
https://test/test/test/test?partner_key=r935pokA8-98A1-r7y6-i90b-3940632d2q99®exkey: .*\.test\.ml.* to get the data?
I tried the above method and it didn't seem to work...Since I'm quite newbie on this, not sure if I should write some code to get the data?
Thanks and I'm looking forward to hearing some answers!
Use postmen tool to get the data you can call the url like this,
and get a JSON data response
You can use jQuery this way:
$.ajax({
dataType: "json",
url: 'https://test/test/test/test',
success: function(data) {
// then use data returned JSON content...
}
});
I have a Scala service and a web app in HTML5 . The web app is used to register a user to a particular group and the service is used to post the data in database. Now I want to integrate the service with the web app such that when the user fills the form and clicks the submit button the service should be called and should update the database. I am using ajax
$.ajax({
method: "POST",
crossDomain: true,
url: "http://20.201.151.134:8091/update ",
data: JSON.stringify({name:name,
shortid:shortId,
password:pass}) ,
contentType: "application/json",
dataType: "json"
}).done(function( data ) {
alert( "Data Saved: " + data );
});
and in build.sbt file I have included the dependency
"com.thetransactioncompany" % "cors-filter" % "1.3.2"
But I'm still getting the error:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.
The response had HTTP status code 400.
Can anyone plz help to resolve it?
Have you added a 'Access-Control-Allow-Origin' header in your service?
I think you should add this in order the cross origin security works properly: something like response.header('Access-Control-Allow-Origin: http://trusted.site')
I'm trying to receive data from SendGrid API
$.ajax({
type:'GET',
url:"https://sendgrid.com/api/bounces.get.json",
data: {api_user:'username',api_key:'userkey',date:1},
success: function(data){
console.log(data)
},
crossDomain: true,
dataType: 'jsonp',
error:function(a,b,c){
console.log(a);
}
});
Console shows:
Object { readyState=4, status=200, statusText="success"}
parsererror
Error: jQuery17208301184673423685_1374648217666 was not called
Where is the bug or issue ?
The issue is that SendGrid does not support jsonp.
Unfortunately, switching to plain JSON will not work either, as SendGrid has no CORS headers and browsers will not allow you to access the pages. In short you cannot make AJAX requests dorectly to SendGrid.
However, generally this is for the better as all SendGrid endpoints require authentication and having your username and password in an AJAX request would allow users to take them and then use them to send email.
To get these stats on the frontend, you'll need a server to get them and output them on your domain or a domain with CORS allowances.
Here comes a one click solution!
Deploy your instance of SendGrid Proxy to Heroku
Use {your-sendgrid-proxy}.herokuapp.com instead of api.sendgrid.com
Done (Really)
How it works:
It creates a node powered http proxy using express-http-proxy
It adds needed headers such as Authorization and Content-Type
It overrides Access-Control-Allow-Origin to * to make your browser CORS warning free
See how the magic is working. Feedback is welcome!
I cant manage to loop through my json that i have setup at this url i just keep getting the following error Uncaught SyntaxError: Unexpected token ILLEGAL
here is my json http://example.com/api/?email=info#example.co.uk&format=json
i am trying to pull it in from the following code.
//json
var json_feed = 'http://example.com/api/?email=info#example.co.uk&format=json&callback=?';
$.getJSON(json_feed, function(json) {
console.log(json);
});
Where am i going wrong can someone advise.
Manage to get it to work with the following..
php
header('content-type: application/json; charset=utf-8');
echo json_encode($buckets);
jquery
$.ajax({
url: 'http://example.com/api/?email=info#example.co.uk&format=json',
success: function(data) {
console.log(data);
}
});
The url you have shown doesn't returns JSON but not JSONP. Due to the same origin policy restriction you cannot send cross domain AJAX calls unless the server supports JSONP. You have added the callback=? parameter to the url which is OK from the client side perspective as jQuery will send it, but the server seems to completely ignore it and it returns JSON instead of wrapping this JSON into the callback passed as parameter (which is JSONP).
You should probably contact the authors of the site you are trying to access or read the documentation of the API they are exposing (if any) to see if it supports JSONP.
I run a REST-API build on top of Sinatra.
Now I want to write a jQuery Script that fetches data from the API.
Sinatra is told to response with JSON
before do
content_type :json
end
A simple Route looks like
get '/posts' do
Post.find.to_json
end
My jQuery script is a simple ajax-call
$.ajax({
type: 'get',
url: 'http://api.com/posts',
dataType: 'json',
success: function(data) {
// do something
}
})
Actually everything works fine as long as both runs on the same IP, API and requesting JS.
I already tried to play around with JSONP for Rack without any positive results, though. Probably I just need a hint how to proceed.
Use JSONP (JSON with padding). There is a JSONP extension for Rack.
Basically, you'll call:
$.ajax({
type: 'get',
url: 'http://api.com/posts',
dataType: 'jsonp',
success: function(data) {
// do something
}
})
which translates to a request like:
http://api.com/posts?callback=someJSFunc
and your server will respond, e.g.:
someJSFunc({"json":"obj"});
Of course, clients can do JSONP requests without jQuery. The trick with JSONP is you serve scripts, which can be cross-domain, rather than pure JSON, with cannot.
Thank's for the answers so far.
You were right and jsonp would solve the problem. The code snippets for javascript work fine.
To set up Sinatra is very easy as it is build on top of Rack.
Therefore simply install the rack-contrib gem
gem install rack-rack-contrib --source=http://gems.github.com/
(or put it in your Gemfile) and add
require 'rack/contrib/jsonp'
use Rack::JSONP
to your application.
This middleware provides regular JSON to non-JSONP clients and JSONP to jQuery & co.
It might be interesting to you http://github.com/shtirlic/sinatra-jsonp — this extension adds missing functionality to sinatra
Also available as gem gem install sinatra-jsonp
Try to call
$.getJSON("http://example.com/?callback=?",function(data) { alert(data); });
In this sample main keyword is construction "callback=?", so you need to process this param in your server-side script, and make a valid JSONP, like this:
function({ "foo" : "bar" });
Where "function" is random data, which is generated by jQuery automatically. Read more here about jQuery and cross-domain JSONP.