jQuery.getJSON() Not working

Question

I'm trying to get JSON array from my php-script. Following is my Jquery code written in my jsp file-

$(document).ready(function()
            {
                    alert("Inside Ready");
                    $.getJSON('http://example.com/root_dir/test_json.php', function(data)
                    {
                        alert(data); 
                    });

            });

but, above code showing only outer alert (i.e. alert("Inside Ready");) and not showing inner alert (i.e. alert(data); ). I'm getting expected json when I hit URL in browser. So definitly there is no problem in URL and php-script.

following is test_json.php

<?php

//Create an array
$json_response = array();

        $row_array['label'] = 'A';
        $row_array['value'] = $row['0 to 2'];
        $row_array['color'] = '#FA2020';

         array_push($json_response,$row_array);

        $row_array['label'] = 'B';
        $row_array['value'] = $row['2 to 3'];
        $row_array['color'] = '#2BD95A';

         array_push($json_response,$row_array);

        $row_array['label'] = 'C';
        $row_array['value'] = $row['above 3'];
        $row_array['color'] = '#F7F739';

        //push the values in the array
        array_push($json_response,$row_array);

   echo json_encode($json_response); 
?>

Getting following json when I hit URL in browser-

[{"label":"A","value":"19","color":"#FA2020"},{"label":"B","value":"1","color":"#2BD95A"},{"label":"C","value":"2","color":"#F7F739"}]

I'm using jquery-1.10.2.js. Thank You..!

Look at your browser's developer tools. Reload the page. What does the JavaScript console say? Can you see your Ajax request in the Net tab? Is it formatted correctly? Does it get a response? Is the response correct? — Quentin, Aug 25 '14 at 11:13
Your PHP is telling the browser it is sending HTML, you should have `header("Content-Type: application/json");` in there. — Quentin, Aug 25 '14 at 11:14
i thnk your http request doesn't contain Access-Control-Allow-Origin header. please check it — Razack, Aug 25 '14 at 11:30
Finally I got the solution. Actually there was "No Transport" error so referring to the answer on above link http://stackoverflow.com/questions/9160123/no-transport-error-w-jquery-ajax-call-in-ie I just placed "$.support.cors = true;" statement before http request. — Namo, Aug 25 '14 at 12:40

score 2 · Answer 1 · answered Aug 25 '14 at 11:29

Try This one...Hope so it is useful to you

        $(document).ready(function()
        {
            $.ajax({
                    type:'POST',
                    url:'http://example.com/root_dir/test_json.php',
                    dataType:'JSON',
                    data:{
                    },
                    success:function(data1){
                            alert(data)
                    },
                    error:function(XMLHttpRequest,textStatus,errorThrown){
                        alert("error");
                    }

                });
       });

score 0 · Answer 2 · answered Aug 25 '14 at 11:34

Your code seems to be working fine - I just created a test page with your code and it works -

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    alert("Inside Ready");
    $.getJSON('http://<<CHANGE SERVER NAME>>/zz-test/get_json.php', function(data)
    {
        alert(data);
    });
});
</script>
</head>
<body>
</body> 
</html>

score 0 · Answer 3 · edited May 23 '17 at 12:10

Your jQuery and PHP code looks fine so, in my experience, it is usually an error caused by calling your PHP script from a different domain (i.e.: file:///). If you can access your browser's console, you should be able to see if this is in fact the error causing the data not to be displayed.

One solution for this is to add at the top of your PHP code:header('Access-Control-Allow-Origin: *');. There are however some security concerns with this, so it should not be used permanently.

Alternatively, you could upload all your HTML, CSS, JS, jQuery, etc. code to the web server hosting the PHP file, which is a far better option.

Finally, if the option above is not possible you could use JSON-P (although this does not work with POST requests), there is a question about this at Simple jQuery, PHP and JSONP example?

jQuery.getJSON() Not working

3 Answers3