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>

Solution 1

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.

Solution 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