So i have made an index.php file with the exact same code as w3schools example and its not working, but it works when i use the w3schools example in tryit! Please help.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.getJSON("http://www.w3schools.com/jquery/demo_ajax_json.js", function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
});
});
</script>
</head>
<body>
<button>Get JSON data</button>
<div></div>
</body>
</html>
Same-origin policy doesn't allow you to send a Ajax request to an external resource:
In computing, the same-origin policy is an important concept in the web application security model. The policy permits scripts running on pages originating from the same site – a combination of scheme, hostname, and port number – to access each other's DOM with no specific restrictions, but prevents access to DOM on different sites. The same-origin policy also applies to
XMLHttpRequestsunless the server provides an Access-Control-Allow-Origin (CORS) header. Notably,WebSocketsare not subject to the same-origin policy.
I think @Vohuman is right but if you are using php you can make a workaround using php curl function. You can create a local php file like below and call it in your js as json source.
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://www.w3schools.com/jquery/demo_ajax_json.js");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 20);
$data = curl_exec($ch);
curl_close($ch);
echo $data;
You can also use jsonp to work across domains http://learn.jquery.com/ajax/working-with-jsonp/