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>

score 6 · Accepted Answer · answered Oct 28 '17 at 11:27

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 '17 at 11:27

Andrei Roba

2,156
2
16
33

can you please tell about CORS? – Abhijit Das Oct 28 '17 at 13:55
as I am probably not the best teacher, I would advise you to have a look at this pretty good explanation https://stackoverflow.com/a/35553666/5173530 – Andrei Roba Oct 28 '17 at 14:07

score 2 · Answer 2 · answered Oct 28 '17 at 11:00

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

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 — derloopkat, Oct 28 '17 at 11:13

JQuery ajax get json data

2 Answers2