CODEWITHSUNDEEP
javascriptphpjqueryjson
Namo
Namo

Reputation: 157

jQuery.getJSON() Not working

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..!

Upvotes: 0

Views: 6659

Answers (3)

Zak
Zak

Reputation: 2058

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?

Upvotes: 0

Abhijit
Abhijit

Reputation: 114

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>

Upvotes: 0

Manisha Patel
Manisha Patel

Reputation: 354

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");
                    }

                });
       });

Upvotes: 2

Related Questions