getJSON not working (Beginner)

Question

I am totally new to JSONP, AJAX and JQuery. I am trying to retrieve some data from a given URL, but it is not getting to my alert("Success!") after the getJSON. I'm struggling to work out why, or what to do next. Any advice?

(Note, I have replaced the actual URL for xx in this question)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Request json test</title> 
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script src="json-jquery.js" type="text/javascript"></script> 
<script src="json-jquery.js" type="text/javascript"></script>
<a href="json-data.php"></a>

<script>
   $(document).ready(function(){
       $.getJSON('http://xx.xxx.xxx.xx/getCourses.php?action=getUnpaid', function( data ) {
           alert("Success!");               
       });
   });
</script>

</head>
<body>
<a href="#" id="getdata-button">Get JSON Data</a>
<div id="showdata"></div>
</body>
</html>

It is an external URL to me. Does that answer your question? — Andy A, Jul 26 '14 at 13:43
Then this is your "problem": https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy — Sirko, Jul 26 '14 at 13:45
do you set allow access to this external file getCourses.php — kamesh, Jul 26 '14 at 13:45
@Sirko Ok, thanks. So how do I edit my code to be able to access this file, or what do I read to work it out? This is the task I have at hand to learn this stuff. — Andy A, Jul 26 '14 at 13:47
@kamesh This stuff is totally new to me, and I dont have an understanding of what you have said. However, if it answers your question, I have posted all of my code. — Andy A, Jul 26 '14 at 13:49
@AndyA You'll have to change the code in that PHP script. See this question for more details: [CORS with php headers](http://stackoverflow.com/a/9866124/1169798) — Sirko, Jul 26 '14 at 13:51
@Sirko Do you mean that getCourses.php needs to change? This has been provided for me, and it is my task to display the information on screen using JQuery, JSONP, and AJAX. Are you saying that it is an impossible task because getCourses is not set up correctly, or have I just done the completely wrong thing? — Andy A, Jul 26 '14 at 13:54
You have to be on the same domain to access the data. If nobody set those CORS parameters in the first place, you wont be able to get the data in an HTML file from another domain. — Sirko, Jul 26 '14 at 13:57
@Sirko Please bare with me as I am literally 100% new to this today. I don't know what CORS means. However, it sounds like you are saying that its impossible to retrieve the data at present because I am not on the same server. This is confusing to me - surely the whole point of the webservice is to be able to retrieve the data from anywhere? — Andy A, Jul 26 '14 at 13:59
@AndyA I assume someone else set those parameters already or as in the answer by Guffa JSONP is enabled. So try check for JSONP first. — Sirko, Jul 26 '14 at 14:07
http://stackoverflow.com/questions/6809053/simple-jquery-php-and-jsonp-example — Lakshay Dulani, Jul 26 '14 at 14:07
@Sirko Yes, I believe I should be using JSONP (that was mentioned to me, I just dont yet have an understanding of it). How do I 'check for JSONP', or is that what Guffa's answer is doing? — Andy A, Jul 26 '14 at 14:13
@Lakshay the code example from your link works, but I cant work out how to use it to solve my own problem. — Andy A, Jul 26 '14 at 14:18
the only reason i can guess is that ur not getting your data in jsonp format — Lakshay Dulani, Jul 26 '14 at 14:22
After @Guffa 's advice, it appears that the problem is "ReferenceError: courses is not defined", from the first line of the php file I am retrieving data from. Is this a problem with the external data, or do I somehow need to define that I am searching for 'courses'? — Andy A, Jul 26 '14 at 14:55

score 2 · Accepted Answer · answered Jul 26 '14 at 14:02

2

The getJSON method doesn't do a JSONP request. To use JSONP you can use the ajax method, so that you can specify the data type:

$(document).ready(function(){
  $.ajax({
    url: 'http://xx.xxx.xxx.xx/getCourses.php?action=getUnpaid',
    dataType: 'jsonp',
    success: function( data ) {
      alert("Success!");               
    }
  });
});

A JSON request is made using the XMLHTTPRequest object, and is subject to the same origin policy. JSONP was introduced to circumvent this, and uses a script tag to load the resource. As a script can be loaded from a different domain, it's not subject to the same origin policy.

answered Jul 26 '14 at 14:02

Guffa

687,336
108
737
1,005

Its probably my fault as I am totally new to this, but this block of code breaks my page. I dont know how to even find the error message tho. Im using NetBeans. – Andy A Jul 26 '14 at 14:11
@AndyA: You should open the error console and look for error messages. In Internet Explorer press F12 and select the second tab. In Firefox in the menu: Tools > Web Developer > Web Console. In Chrome press F12 and select the Console tab. – Guffa Jul 26 '14 at 14:26
Thanks I'll do that now. Meanwhile, can you please double check all your brackets are opened and closed correctly? It looks a little bizarre to me. – Andy A Jul 26 '14 at 14:30
It says SyntaxError: missing } after property list. Is this from your code snippet? Or possibly I pasted it in wrong. – Andy A Jul 26 '14 at 14:31
@AndyA: Check against how the code looks now. I added a `}` right after posting the answer, you might have copied it before that. – Guffa Jul 26 '14 at 14:34
Aha! I've now simplified the code. I got the error "ReferenceError: courses is not defined". (and yes, this is from copying your answer freshly again) – Andy A Jul 26 '14 at 14:34
'courses' is the first word in the data I am retrieving. Im not sure how to resolve this though. – Andy A Jul 26 '14 at 14:37
To clarify, the problem is "ReferenceError: courses is not defined", from the first line of the php file I am retrieving data from. Is this a problem with the external data, or do I somehow need to define that I am searching for 'courses'? – Andy A Jul 26 '14 at 14:55
Now I can see logs, I can see that you have fixed my original problem( WHich was "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://95.138.162.68/getCourses.php?action=getUnpaid. This can be fixed by moving the resource to the same domain or enabling CORS.". I'll open a new question for my new problem. – Andy A Jul 26 '14 at 15:17
Had some connection problems, so I was away from the net for a while. I saw that you got that problem sorted using the `jsonpCallback` property. :) – Guffa Jul 26 '14 at 17:07

getJSON not working (Beginner)

1 Answers1