Echo'ing php as “return value” to ajax call

Question

My jquery code:

    var value = $.ajax({
            type: "POST",
            url: "to_submit.php",
            data: $('#submit').serialize(),
            cache: false,
            async: true
        }).success(function(response){
            console.log(response);
            console.log("data received");
            console.log(response.data);
            $("#appended").append(response);});
        }).error(function() {});
        });

and PHP

include("../header.php");
$to_return = "test";
echo "\ndata: " . json_encode($to_return);
flush();

How the console.logs in the javascript part behaves:

first console.log: (a lot of code information (head, body, etc) related to my website header!)

still first console.log: data: "test"

console.log("data received");

second console.log: undefined

So, data is being recognized as undefined and a lot of code is being flushed, and I can't figure out why...

Answer 1

Two things: first, you shouldn't need to use flush() - simply echo your data and end your script.

Second, the results of your echo statement: data: ["insert your data here"] is not valid JSON and you're not going to be able to decode it on the client.

Answer 2

Change

echo "\ndata: " . json_encode($to_return); 

To

echo json_encode($to_return); 

Cause this string can't be parsed properly by js decoding function (it is not a valid json string).