Ajax is returning undefined

1

Well, I'm just trying to list the names I have in the bank, but the message undefined , can anyone help? Below is the jquery + query to the bank.

jQuery:

<body>
    <script>
        $(document).ready(function() {
            $('#relatorio').click(function(event) {
                $.ajax({
                    type: 'post',
                    datatype: 'json',
                    url: 'ajax.php',
                    success: function(retorno){
                        for (var i = 0; i < retorno.length; i++) {
                            console.log(retorno[i].nome);
                        };

                    }
                })
            });         
        });
    </script>
    <input type="submit" name="Relatorio" value="Relatorio" id="relatorio">     
</body>

Consulted with the bank:

<?php   

$conect = conecta();    
$select  = seleciona($conect);
echo json_encode($select);

function conecta() {
    $server   = "localhost";
    $usuario  = "root";
    $senha    = "";
    $database = "teste";
    $conexao  = mysqli_connect($server, $usuario, $senha) or die(); 
    mysqli_select_db($conexao, $database);
    return $conexao;
}
function seleciona($conect) {
    $guarda = array();
    $query    = "SELECT * FROM teste";
    $executa  = mysqli_query($conect, $query);  
    $i = 0;     
    while ($resultado = mysqli_fetch_array($executa)) {
        $guarda[] = array('nome'=> (utf8_encode($resultado['nome'])));
    }
    return $guarda;
}
?>
    
asked by anonymous 25.06.2015 / 17:21

1 answer

3

Try to do this, this will generate an error json, type this {error: "Erro de conexão"} :

$conexao  = mysqli_connect($server, $usuario, $senha) or die(json_encode(array(
    'error' => mysqli_connect_error()
)));

and this will generate Content-Type for the jQuery response:

header('Content-Type: application/json');

php code should look like this:

<?php
header('Content-Type: application/json');

$conect = conecta();    
$select  = seleciona($conect);
echo json_encode($select);

function conecta() {
    $server   = "localhost";
    $usuario  = "root";
    $senha    = "";
    $database = "teste";
    $conexao  = mysqli_connect($server, $usuario, $senha) or die(json_encode(array(
        'error' => mysqli_error()
    ))); 
    mysqli_select_db($conexao, $database);
    return $conexao;
}

function seleciona($conect) {
    $guarda = array();
    $query    = "SELECT * FROM teste";
    $executa  = mysqli_query($conect, $query);  
    $i = 0;     
    while ($resultado = mysqli_fetch_array($executa)) {
        $guarda[] = array('nome'=> (utf8_encode($resultado['nome'])));
    }
    return $guarda;
}
?>

And jQuery should look like this:

success: function(retorno){
    //Está linha detecta um erro de conexão
    if (retorno.error) {
        console.log(retorno.error);

    //Está linha detecta se a resposta é um array
    } else if (typeof retorno.length !== "undefined") {
        for (var i = 0; i < retorno.length; i++) {
            console.log(retorno[i].nome);
        };

    //Está linha detecta se houve falha na resposta e envia o para o log
    } else {
        console.log("Dados inválidos:", retorno);
    }
}

Complete code:

<body>
    <script>
        $(document).ready(function() {
            $('#relatorio').click(function(event) {
                $.ajax({
                    type: 'post',
                    datatype: 'json',
                    url: 'ajax.php',
                    success: function(retorno){
                        if (retorno.error) {
                            console.log(retorno.error);
                        } else if (typeof retorno.length !== "undefined") {
                            for (var i = 0; i < retorno.length; i++) {
                                console.log(retorno[i].nome);
                            };
                        } else {
                            console.log("Dados inválidos:", retorno);
                        }
                    }
                })
            });         
        });
    </script>
    <input type="submit" name="Relatorio" value="Relatorio" id="relatorio">     
</body>

To add to the body of the HTML, you should use .html , .appendTo , and others you can read in jQuery documentation :

<body>
    <script>
        $(document).ready(function() {
            $('#relatorio').click(function(event) {
                $("#resposta").html("Carregando...");
                $.ajax({
                    type: 'post',
                    datatype: 'json',
                    url: 'ajax.php',
                    success: function(retorno){
                        if (retorno.error) {
                            $("#resposta").html(retorno.error);
                        } else if (typeof retorno.length !== "undefined") {
                            $("#resposta").html("");
                            for (var i = 0; i < retorno.length; i++) {
                                //Gera novos paragrafos:
                                $("<p></p>").html(retorno[i].nome).appendTo("#resposta");
                            };
                        } else {
                            $("#resposta").html("Dados inválidos:" + retorno);
                        }
                    }
                })
            });         
        });
    </script>
    <input type="submit" name="Relatorio" value="Relatorio" id="relatorio">
    <div id="resposta"></div>
  </body>
    
25.06.2015 / 17:36