I have an AJAX call made with jQuery to a 500px API:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"/>
<script type="text/javascript">
$(document).ready(function(){
$('#myButton').click(function() {
$.ajax({
url: "https://api.500px.com/v1/photos?feature=editors&page=2&consumer_key=<your-consumer-key>",
dataType: 'jsonp',
type: 'GET',
success: function(result){
alert("success");
for(x in result.data){
$('#myHtmlList').append('<li><img src="'+result.data[x].image_url+'"></li>');
}
},
error: function(result){
alert("Error: "+result);
console.log(result);
}
});
});
});
</script>
The result of this code is the "Error" alert. If I copy and paste the same url in browser it works and returns the json with the images. I don't understand why the javascript call doesn't work.
I also don't understand why if I make the same code call to an Instagram API, for example:
url: 'https://api.instagram.com/v1/users/' + userId + '/media/recent'
dataType: 'jsonp',
type: 'GET',
data: {access_token: <your-access-token>},
it works.