PHP not Sending JSON Object to JavaScript

Question

<?php
    header("Content-Type: application/json");
    if(isset($_POST['limit'])){
        $limit = preg_replace('#[^0-9]#', '', $_POST['limit']);
        require_once("connect_db.php");
        $i = 0;
        $jsonData = '{';
        $sqlString = "SELECT * FROM tablename ORDER BY RAND() LIMIT $limit";
        $query = mysqli_query($con, $sqlString) or die (mysqli_error()); 
        while ($row = mysqli_fetch_array($query)) {
            $i++;
            $id = $row["id"]; 
            $title = $row["title"];
            $cd  = $row["creationdate"];
            $cd = strftime("%B %d, %Y", strtotime($cd));
            $jsonData .= '"article'.$i.'":{ "id":"'.$id.'","title":"'.$title.'", "cd":"'.$cd.'"  },';
        }
        $now = getdate();
        $timestamp = $now[0];
        $jsonData .= '"arbitrary":{"itemcount":'.$i.', "returntime":"'.$timestamp.'"}';
        $jsonData .= '}';
        echo $jsonData;
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            var myTimer;
            function ajax_json_data(){
            var databox = document.getElementById("databox");
            var arbitrarybox = document.getElementById("arbitrarybox");
            var hr = new XMLHttpRequest();
            hr.open("POST", "json_mysql_data.php", true);
            hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            hr.onreadystatechange = function() {
                if(hr.readyState == 4 && hr.status == 200) {
                    var d = JSON.parse(hr.responseText);
                    arbitrarybox.innerHTML = d.arbitrary.returntime;
                    databox.innerHTML = "";
                    for(var o in d){
                        if(d[o].title){
                            databox.innerHTML += '<p><a href="page.php?id='+d[o].id+'">'+d[o].title+'</a><br>';
                            databox.innerHTML += ''+d[o].cd+'</p>';
                            }
                        }
                    }
                }
                hr.send("limit=4");
                databox.innerHTML = "requesting...";
                myTimer = setTimeout('ajax_json_data()',6000);
            }
        </script>
    </head>
    <body>
        <h2>Timed JSON Data Request Random Items Script</h2>
        <div id="databox"></div>
        <div id="arbitrarybox"></div>
        <script type="text/javascript">ajax_json_data();</script>
    </body>
</html>

PHP code goes on a separate file called "json_mysql_data.php". I'm just following this tutorial from https://www.youtube.com/watch?v=-Bv8P5oQnFw and it runs fine for him but not for me. I tested "connect_db.php" with mysql alone and it works fine. It seems to me like php doesn't go pass if (isset ($_POST['limit'])) but why...On the html file I get the "requesting..." message from the javascript code which means is waiting for PHP. Thanks for your help guys.

You do realize you're sending this HTML page as a JSON object? Also, you may want to use arrays and then output the json object made by passing that array to json_encode(). If you're going to use the same page, you should make sure that the HTML isn't being output when you request the data. — Jhecht
– Jhecht, Commented Jun 22, 2014 at 17:08

arielnmz · Accepted Answer · 2014-06-22 16:44:27Z

1

You check for the ready state and change the content of databox with the response JSON inside the onreadystatechange function:

hr.onreadystatechange = function(aEvt) {
    if(hr.readyState == 4 && hr.status == 200) {
        …
        databox.innerHTML += …;
        …
    }
    …
    databox.innerHTML = "requesting...";
    …
}

But you change the HTML of the databox:

databox.innerHTML = "requesting...";

Still inside the block of the onreadystatechange function and after you receive the response, so the databox will always say "requesting..." no matter what you receive. You have to move the part that prints "requesting..." outside of it:

hr.onreadystatechange = function(aEvt) {
    if(hr.readyState == 4 && hr.status == 200) {
        …
        databox.innerHTML += …;
        …
    }
    …
}
…
databox.innerHTML = "requesting...";
…

Update:

Also, it seems that your function ins't defined correctly, as you can see, the one on the MDN reference pages example receives a parameter:

req.onreadystatechange = function(aEvt) {
    …
}

But yours doesn't have such parameter:

hr.onreadystatechange = function() {
    …
}

Ans that's it.

edited Jun 22, 2014 at 16:44

answered Jun 22, 2014 at 4:24

arielnmz

9,21510 gold badges43 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

arielnmz Over a year ago

What happens if you put an alert inside the function? Does it get displayed?

Lizardan Over a year ago

If I put it under "function ajax_json_data () {alert('working');} it gets displayed but if I put it inside the "hr.onreadystatechange(){alert('working');} it doesn't show.

arielnmz Over a year ago

Do you put it right at the beginning or inside the if?

arielnmz Over a year ago

Are your sure the server is valid? See my updated anser.

Lizardan Over a year ago

Yes. I'm running on my localhost

|

MrLore · Accepted Answer · 2014-07-17 01:57:44Z

0

Thank you for your help @arielnmz. I found the problem. PHP was having issues with the getDate() function because the date.timezone field was not configured in the PHP.ini file. Adding the following line to the file fixed the problem:

date.timezone = "UTC"

edited Jul 17, 2014 at 1:57

MrLore

3,7822 gold badges30 silver badges37 bronze badges

answered Jun 22, 2014 at 20:01

Lizardan

12 bronze badges

Collectives™ on Stack Overflow

PHP not Sending JSON Object to JavaScript

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related