Trying to get JSON with jQuery

Question

I'm trying to get the JSON with that example from www.w3schools.com

I just edit de url JSON to "http://www.w3schools.com/jquery/demo_ajax_json.js"

I copied that into my desktop index.html and it doesn't works in local machine. I tried upload it to my web and it doesnt works... Can you help me please?

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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>

[Don't use w3schools](http://www.w3fools.com/). Go straight to the [source](http://learn.jquery.com/ajax/) instead. — Jørgen R, Jun 19 '14 at 07:50
possible duplicate of [jQuery AJAX cross domain](http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain) — Undefined, Jun 19 '14 at 08:00

score 2 · Answer 1 · edited May 23 '17 at 12:27

2

you are trying to send Cross-Origin Request

Install firebug and check in firebug console you will see this error message

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.w3schools.com/jquery/demo_ajax_json.js. This can be fixed by moving the resource to the same domain or enabling CORS."

Read more in this answer here

edited May 23 '17 at 12:27

Community

1
1

answered Jun 19 '14 at 07:52

Subodh Ghulaxe

18,333
14
83
102

score 1 · Answer 2 · answered Jun 19 '14 at 08:05

I have uploaded the running code on JSfiddle. Take a look at the link.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.getJSON("http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json",function(result){
      $.each(result, function(i, field){
        $("div").append(field + " ");
      });
    });
  });
});
</script>
</head>
<body>

<button>Get JSON data</button>
<div></div>

</body>
</html>

score 0 · Answer 3 · answered Jun 19 '14 at 07:52

See your browser console :

XMLHttpRequest cannot load http://www.w3schools.com/jquery/demo_ajax_json.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

You can not directly request the file, you are not allowed

One solution could be to use php, and call the php file from js with ajax

Trying to get JSON with jQuery

3 Answers3