Home>

I want to pass an array of php in ajax, but I'm in trouble because it doesn't work.
For now, return the received array as it is without processing, and display it.
I am aiming, but the text of class = btn is
[object Object]
It becomes.
I tried to see it in the console, json_decode, log output, etc.
I couldn't see the contents.
What should I do now?

<html>
・
・
・
</html>
<script>
document.addEventListener ('DOMContentLoaded', function () {
        document.getElementById ('btn'). addEventListener ('click', function () {
            var btn = document.getElementById ('btn');
            var data =<? php echo json_encode ($ajax);?&gt ;;
            var xhr = new XMLHttpRequest ();
            xhr.addEventListener ('loadstart', function () {
                btn.textContent = 'loading ...';
            }, false);
            xhr.addEventListener ('load', function () {
                btn.textContent = xhr.responseText;
            }, false);
            xhr.addEventListener ('error', function () {
                btn.textContent = 'error';
            }, false);
            xhr.open ('POST', 'ajax.php', true);
            xhr.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded;charset = UTF-8');
            xhr.send ('data =' + encodeURIComponent (data));
        }, false);
    }, false);
</script>
$ajax is
$ajax = array ('a' =>'1', 'b' =>'2', 'c' =>'3');
Associative array
<? php
$data = $_POST ['data'];
echo $data;