I am new to working with AJAX, what I'd like to be able to do is get the contents of a div from an external site and return it on my own site.
Here is the code I currently have:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="get-page-content.js"></script>
</head>
<body>
<h1>Page content should go here:</h1>
<div id="here"></div>
</body>
</html>
And for my .js script:
$.ajax({
url: 'http://www.spotlight.com/6298-9058-7917',
type: 'GET',
success: function(res) {
var data = $.parseHTML(res);
$(data).find('.skills').each(function(){
$('#here').append($(this).html());
});
}
});
As expected, this works if it's an external site on the same server, however, when trying to get info from another domain I get the following error: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Is there anything I can do to work around this error?