I cannot send JSON array to PHP page

Question

Good night,

I am trying to send a simple code array (2,5,7,etc) in Json format to a php page through an Ajax request but I cannot.

My JS:

<script type="text/javascript">
    function enviArray() {

        cod_jogador.sort();
        var meuArray = JSON.stringify(cod_jogador);
        var x;

        var httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("demo").innerHTML = this.responseText;
            }
        };
        httpRequest.open("GET", "selecao.php", true);
        httpRequest.send("x=" + meuArray);

    };
</script>

The cod_jogador is the vector with the values.

My HTML:

<div id="demo">
    <button type="button" name="" value="" class="button" onclick="enviArray()">Teste</button>
</div>

On the page selecao.php i have the variable created to receive JSON:

$array = json_decode($_GET["x"], false);
echo "$array";

But whenever I echo in any variable in the GET (I’ve tried with POST ), it always returns me indefinite. What I’m doing wrong?

Answer 1

In this example, the POST method is used.

HTML

<div id="demo">
    <button type="button" name="" value="" class="button" onclick="enviArray()">Teste</button>
</div>

JS

<script type="text/javascript">
function enviArray() {

    var cod_jogador = ["1", "2", "3"];
    cod_jogador.sort();
    var meuArray = "x=" + JSON.stringify(cod_jogador); 

    var xhr = new XMLHttpRequest();       
    xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML = this.responseText;
        }
    };
    xhr.open("POST", "selecao.php", true);    
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(meuArray);
};
</script>

PHP

<?php
$obj = json_decode($_POST["x"]);
echo json_encode($obj);
exit();

Answer 2

As you are sending information to the server, use the correct HTTP verbs for the request which in your case is the verb POST. In addition to specifying the HTTP verb, you need to "tell" the server what kind of content is sent, so you need to use the header (header) Content-Type.

function enviArray() {

    cod_jogador.sort();
    var meuJson = JSON.stringify({codigos: cod_jogador});

    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML = this.responseText;
        }
    };

    httpRequest.open("POST", "selecao.php");
    httpRequest.setRequestHeader("Content-Type", "application/json");
    httpRequest.send(meuJson);
};

Your php file should look like this:

$array = json_decode($_POST["codigos"], true);
print_r($array); //Não é possível utilizar o "echo" em um array, somente em seus valores: echo $array[0].