JQuery ajax get json data

Question

how to get image url from "https://api.qwant.com/api/search/images?count=10&offset=1&q=cars" api using jquery. i'm unable to do it. bellow i've attached my code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$.ajax({
    url:"https://api.qwant.com/api/search/images?count=10&offset=1&q=cars",
    type:"GET",
    crossDomain : true,
    async: false,
    dataType: "jsonp",
    jsonpCallback: "myJsonMethod",
    success: function(json) {
       $.parseJson(json)
    },
    error: function(e) {
       console.log(e);
    }
});

function myJsonMethod(response)
{
    console.log(response);
}
</script>

Andrei Roba · Accepted Answer · 2017-10-28 11:27:14Z

6

Your request isn't working because of CORS, which is enabled on the API server. You need a proxy server to workaround this. For development purposes you could use a free online proxy server, your code then simplifies:

 $.ajax({
    url:"<PROXY:SERVER>https://api.qwant.com/api/search/images?count=10&offset=1&q=cars",
    success: function(json) {
        // Do stuff with data
    },
    error: function(e) {
       console.log(e);
    }
});

As an example check out this working fiddle.

answered Oct 28, 2017 at 11:27

Andrei Roba

2,3322 gold badges19 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abhijit Das Over a year ago

can you please tell about CORS?

Andrei Roba Over a year ago

as I am probably not the best teacher, I would advise you to have a look at this pretty good explanation stackoverflow.com/a/35553666/5173530

Nitin Daddikar · Accepted Answer · 2017-10-28 11:00:04Z

2

Try this

$.ajax({
    url:"https://api.qwant.com/api/search/images?count=10&offset=1&q=cars",
    type:"GET",
    crossDomain : true,
    async: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    jsonpCallback: "myJsonMethod",
    success: function(json) {
       $.parseJson(json)
    },
    error: function(e) {
       console.log(e);
    }
});

This is a CORS thing, so you can server all this up from a web server, like http-server, and I think certain browsers like Firefox allow this to occur locally.

There are some flags with Chrome that'd allow it to work locally like this too, I believe.

Cheers

answered Oct 28, 2017 at 11:00

Nitin Daddikar

3455 silver badges12 bronze badges

1 Comment

Daniel Manta Over a year ago

I see same error with that function, also content type is for sending data to the api, and there's no data being sent but received

Collectives™ on Stack Overflow

JQuery ajax get json data

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related