PHP array to seperate JavaScript file via AJAX

Question

I made a simple php file, that saves data from MySQL db into 2 arrays. I am trying to send these two arrays to the js file (which is on seperate from the html file). I am trying to learn AJAX, but it seems i am not doing something correct.

Can you please explain what am i doing wrong?

My php file: get.php

<?php
define('DB_NAME', 'mouse');
define('DB_USER', 'root');
define('DB_PASS', '');
define('DB_HOST', 'localhost');
$link = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}else{
   echo 'Successfuly connected to database :) <br/>';
}
$sql = "SELECT x, y FROM mousetest";
$result = mysqli_query($link, $sql);
$x_array = [];
$y_array = [];
if (mysqli_num_rows($result) > 0) {
    while($row = mysqli_fetch_assoc($result)) {
        echo "x: " . $row["x"]. " - y: " . $row["y"]. "<br>";
        array_push($x_array, $row["x"]);
        array_push($y_array, $row["y"]);
    }
} else {
    echo "0 results";
}
echo json_encode($x_array);
echo "<br>";
echo json_encode($y_array);
mysqli_close($link);
$cd_answer = json_encode($x_array);
echo ($cd_answer);
?>

And this is my JS file:

$(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "get.php",
        dataType: "json",
        data : {anything : 1},
        success:function(data){
            var x = jQuery.parseJSON(data); // parse the answer
            x = eval(x);
            console.log(x.length);
        }
    });
});

I really hope you understand, what i am trying to do. Where is the problem? I really thought this should work, as i went through it quite a few times to say the least...

Well i just check if it logs in the console the length of the array, but it does nothing. I do not understand where the problem is. That is the problem :) — Tadej Bogataj
– Tadej Bogataj, Commented Jan 20, 2017 at 19:23
is this file and get.php in the same directory? If not you will need a better path in URL. Likewise use done rather than success for your callback see stackoverflow.com/questions/8840257/… — nerdlyist
– nerdlyist, Commented Jan 20, 2017 at 19:28
not just echo some json arbitrarily, you need to return valid json. It looks like your output includes Successfuly connected to database :) x: " . $row["x"]. " - y: " . $row["y"]. " and potentially 0 results which all are not valid json. On top of this you then print your two arrays as separate json objects, you need to put them in an associative array and then json encode that array not the separate parts. — Patrick Murphy
– Patrick Murphy, Commented Jan 20, 2017 at 19:32

Barmar · Accepted Answer · 2017-01-20 19:34:20Z

2

You can't use echo json_encode(...) twice. The client expects a single JSON object, not a series of them.

You should make each array an element of a containing array, which you then return as JSON.

$result = array('x' => $x_array, 'y' => $y_array);
echo json_encode($result);

Then in the jQuery code you would use:

var x = data.x;
var y = data.y;

Also, when you use dataType: 'json', jQuery automatically parses the JSON when it sets data. You shouldn't call jQuery.parseJSON() or eval().

answered Jan 20, 2017 at 19:34

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

1 Comment

Tadej Bogataj Over a year ago

I corrected the code as following: get.php: $result = array('x' => $x_array, 'y' => $y_array) echo json_encode($result); and the js file: $(document).ready(function(){ $.ajax({ type: "GET", url: "get.php", dataType: "json", data : {anything : 1}, success:function(data){ var x = data.x; var y = data.y; console.log(x.length); } }); }); But it still does not work...

Collectives™ on Stack Overflow

PHP array to seperate JavaScript file via AJAX

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related