jQuery JSON Response

Question

I'm having problems with jQuery JSON Response.. I'm passing the information, and getting back the headers, but i don't get the HTML. I've been trying to solve this with JSONP too but still with no results.

<script type='text/javascript'>
    $(document).ready(function(){
        $("input.senddata").click(function() {
            var ipForm = $('input[name="ip_submit"]').val();
            var gameForm = $( 'select[name="game_submit"]' ).val()
            $.getJSON("http://gamepwn.net/serversdotee/add-server.php",
              {
                ip: ipForm,
                game: gameForm
              },
              function(data) {
                $('#result').html(data);
              });
        });
    });
</script>

the php file:

$data = array('items'=>array('serverip'=>'localhost', 'game'=>'cs','protocol'=>'48'));
echo json_encode($data);

the headers im recieving:

   Response Headers
Cache-Control   no-cache, must-revalidate
Connection  Keep-Alive
Content-Type    application/json
Date    Tue, 26 Jun 2012 21:49:01 GMT
Expires Mon, 26 Jul 1997 05:00:00 GMT
Keep-Alive  timeout=5, max=100
Server  Apache/2.2.19 (Unix) mod_ssl/2.2.19 OpenSSL/0.9.8e-fips-rhel5 DAV/2 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 mod_perl/2.0.4 Perl/v5.8.8
Transfer-Encoding   chunked
X-Powered-By    PHP/5.3.6

   Request Headers
Accept  application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language et,et-ee;q=0.8,en-us;q=0.5,en;q=0.3
Connection  keep-alive
Host    gamepwn.net
Origin  http://servers.kdfx.eu
User-Agent  Mozilla/5.0 (Windows NT 6.1; rv:14.0) Gecko/20100101 Firefox/14.0 FirePHP/0.7.1
x-insight   activate

You need to `echo json_encode($data)`. Then you get an object in JavaScript. Your code doesn't return any HTML so you need to build the HTML structure in your JavaScript code - passing a plain object to `.html()` won't work. — ThiefMaster, Jun 26 '12 at 21:55
Is your $data supposed to be the response? Remember that the response has to be JSON encoded data, which is not the case if you simple echo an array in php. — Jakob Runge, Jun 26 '12 at 21:58
The PHP file works like it's supposed to, it's the jQuery script that only recieves the Parameters sent and Headers, but not the HTML. — Kristjan, Jun 26 '12 at 22:09

Jakob Runge · Accepted Answer · 2017-05-24T15:06:15.383

If I have a file test.php with your content like

  <?php
$data = array('items'=>array('serverip'=>'localhost', 'game'=>'cs','protocol'=>'48'));
echo $data;
?>

then

$ php -f test.php

produces the output:

Array

I think instead you want to deliver JSON encoded data.

<?php
$data = array('items'=>array('serverip'=>'localhost', 'game'=>'cs','protocol'=>'48'));
echo json_encode($data);
?>

The use of json_encode delivers the output:

{"items":{"serverip":"localhost","game":"cs","protocol":"48"}}

Your javascript tries to pass an object to jQueries .html function, when you need to make a string out of it first. An easy way to achive this is by using code like

<script type='text/javascript'>
    $(document).ready(function(){
    var pprint = function (data){
        var print = "{";
        $.each(data, function(key, element){
            if($.isPlainObject(element))
                element = pprint(element);
            print = print + '<br/>' + key + ': ' + element;
        });
        return print + "}";
    };
    console.log("test");
    $.getJSON("test.php",{}, function(data){
        console.log(data);
        $("#foo").html(pprint(data));
        console.log("done.");
    });
    });
</script>

where the pprint function does some simple conversion of plain objects to strings. I got the idea to use $.each from this Answer, but there are also more advanced approaches like https://j11y.io/javascript/prettyprint-for-javascript/.

To check on problems of $.getJSON you can use $.ajax:

$.ajax({
  url: "test.php",
  dataType: 'json',
  data: {},
  success: function(data){
        console.log(data);
        $("#foo").html(pprint(data));
        console.log("done.");
    }),
  error: function(jqXHR, textStatus, errorThrown){
    console.log(textStatus);
    console.log(errorThrown);
  }
});

which you can find documented at https://api.jquery.com/jQuery.ajax/. Hopefully this can tell more about the problems you're experiencing.

I also get that output, but the JSON GET doesn't post the result $('#result').html(data); — Kristjan, Jun 26 '12 at 22:06
The problem appears to be that data is an object and that the jQuery .html() reacts to this the same way as to .html(""). You can see a different reaction if you use .html("" + data) which would give you '[object Object]'. You need some way to encode your object into a string if you want to display it. — Jakob Runge, Jun 26 '12 at 22:14
My console shows "test", not even data & "done"... I've been trying all day to fix this, very frustrating :/ — Kristjan, Jun 26 '12 at 22:41
If your code is a plain copy of what I use that shouldn't happen. I think you might like to use $.ajax to pass an error handling function to check the problems. — Jakob Runge, Jun 26 '12 at 23:06
I have pretty much the same code, changed some things to suit my coding ofcourse... I'll look into it after some sleep, maybe I'm making some silly mistakes because of being tired, heh.. — Kristjan, Jun 26 '12 at 23:08

jQuery JSON Response

1 Answers1