I do not know how to read the array encoded with PHP in json

1

I'm not getting jQuery Ajax to read this array encoded with PHP:

[{"voo_Cod":"1","voo_CidadeOrigem":"1","voo_CidadeDestino":"2","voo_Data":"2015-07-13 07:00:00","voo_Preco":"200"}]

My code in jquery,

       <script>
        $(function() {
            $("#form").on("submit", function(event) {
                event.preventDefault();

                $.ajax({
                    url: "dadosJSON.php",
                    // dataType: "json",
                    type: "post",
                    data: $(this).serialize(),//manda os arquivos em linha
                    success: function(d) {
                        alert(d);


        //testa se exista dados
         if(d[0].erro){
         $("h2").html(d[0].erro);
        } else{
        var html = "";     
        // var html =alert(d);
        // executo este laço para ecessar os itens do objeto javaScript
        for($i=0; $i < d.length; $i++){
            html += " <strong>Voo Data e Horario</strong> "+ d[$i].voo_Data;

            html += " <strong>Preco</strong> "+ d[$i].voo_Preco;
        }//fim do laço  

      }//fim do else


        $("body").html(html); 

                });
            });
        });


    </script>

My code in PHP:

 <?php
// header('Content-Type: application/json; charset=utf8');
require_once("./authSession.php");
require_once("./conf/confBD.php");
include_once("../html/cabecalho_main_Pessoal.html");



$nomeUser = ($_SESSION['nomeUsuario']);
 //teste
//print_r($_POST);// you will get an array of all the values


try{
    $conexao = conn_mysql();
}catch(PDOException $excep){
    echo "Erro!: " . $excep->getMessage() . "\n";
    die();
}


if(!empty($_POST['cidadeOrigem'])){
    $cidOrigem   =  utf8_encode(htmlspecialchars($_POST['cidadeOrigem']));
    $CidDestino  =  utf8_encode(htmlspecialchars($_POST['cidadeDestino']));
    //$passageiros =  utf8_encode(htmlspecialchars($_POST['Passageiros']));
    echo "Contém arquivos";
}else{ echo "Não contém arquivos";}

// Captura os voos disponiveis no banco de dados instrução SQL básica (sem   restrição de nome), 
    $SQLSelect = 'SELECT * FROM voos WHERE voo_CidadeOrigem=? AND   voo_CidadeDestino= ?';

    //prepara a execução da sentença
    $operacao   =  $conexao -> prepare($SQLSelect);

    $pesquisar  =  $operacao -> execute(array($cidOrigem, $CidDestino));

    //$resultados =  $operacao -> fetchAll();//resultado antigo

    $resultados = $operacao->fetchAll(PDO::FETCH_ASSOC);//resultado com array associativo

    // fecha a conexão (os resultados já estão capturados)
    $conexao = null;    



$dados_result = json_encode($resultados);
echo $dados_result;

?>

My response creates a loop with undefined variables.

  

Flight Date and Time undefined Price undefined

Contains files

[{"voo_Cod":"1","voo_CidadeOrigem":"1","voo_CidadeDestino":"2","voo_Data":"2015-07-13 07:00:00","voo_Preco":"200"}]

In the console log, displays the code below

 <!DOCTYPE html>
<html lang="pt-br">
<head>
   <meta charset="UTF-8">
   <title>SISTEMA DAW TURISMO</title>   

   <script    src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><linkrel="stylesheet" type="text/css" href="../CSS/estiloCabecalho.css">

   <link rel="stylesheet" type="text/css" href="../CSS/estilo_login_teste.css">

   <link rel="stylesheet" type="text/css" href="../CSS/estilo_cadastro.css">

    <!--! funciona pra agenda lettering-->
   <link href="../css/starter-template.css" rel="stylesheet">

   <!-- Importando JavaScript -->
   <!-- <script type="text/javascript" src="../JS/ajax_Jquery.js"></script>-->




        <script>


       $(function() {
        $("#form").on("submit", function(event) {
            event.preventDefault();

            $.ajax({
                url: "dadosJSON.php",
                type: "post",
                data: $(this).serialize(),
                success: function(d) {
                    alert(d);

                    if (console) {
                        console.log(d);
                    }

                    if(d[0] && d[0].erro){
                        $("h2").html(d[0].erro);
                    } else {
                        var html = "", j = d.length;
                        for(var i=0; i < j; i++){
                            html += " <strong>Voo Data e Horario</strong> "+   d[i].voo_Data;

                            html += " <strong>Preco</strong> "+    d[i].voo_Preco;
                        }//else fecha
                   }
                    $("body").html(html); 

                            }
                    });
                });
            });




        </script>



</head>



<body>

    <h1>SISTEMA DAW TURISMO</h1>
<nav id="primary_nav_wrap">
<ul>
  <li class="current-menu-item"><a href="./mainPage_Pessoal.php">Home</a>   </li>
  <li><a href="./index.php">Reservas</a></li>
  <li><a href="./alterar_Cadastro.php">Alterar Cadastro</a></li>
  <li><a href="./mainPage_Pessoal.php">Passagens</a></li>
  <li><a href="./hoteis.php">Hotéis</a></li>
   <li><a href="./listarCompras.php">Listar Reservas</a></li>
  <li><a href="./logout.php">Sair</a></li>
  <!-- <li><a href="#">Reservas</a></li>
  <li><a href="#">Contact Us</a></li> -->
</ul>
</nav>

</body>
</html>
    
asked by anonymous 06.07.2015 / 03:06

2 answers

1

If I understand correctly the problem may be in PHP, so add the header in your PHP like this:

dataJSON.php:

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

//Resto do seu código PHP abaixo

Change charset as needed

And I recommend using a good indentation and always using var when declaring variables, I also recommend always setting .length to a variable and not within the loop and instead of alert use console.log to debug the code:

    $(function() {
        $("#form").on("submit", function(event) {
            event.preventDefault();

            $.ajax({
                url: "dadosJSON.php",
                type: "post",
                data: $(this).serialize(),
                success: function(d) {
                    alert(d);

                    if (console) {
                        console.log(d);
                    }

                    if(d[0] && d[0].erro){
                        $("h2").html(d[0].erro);
                    } else {
                        var html = "", j = d.length;
                        for(var i=0; i < j; i++){
                            html += " <strong>Voo Data e Horario</strong> " + d[i].voo_Data;

                            html += " <strong>Preco</strong> " + d[i].voo_Preco;
                        }
                    }
                    $("body").html(html); 
                }
            });
        });
    });

Note that alert(d) will now show [Object object]

To see the data sent to the console, use the Command + / kbd> + Shift + J (Windows / Linux).

Update

According to the output of console.log the dataJSON.php file is returning the body of an HTML.

You can not mix HTML with JSON in this way, you have added this:

include_once("../html/cabecalho_main_Pessoal.html");

What probably is HTML, but your answer has to be JSON, mixing HTML with JSON will cause the interpreter not to parse json, so remove what it will not use.

Also note that error messages should be json, try this:

<?php
header('Content-Type: application/json; charset=utf8');
require_once("./authSession.php");
require_once("./conf/confBD.php");

$nomeUser = ($_SESSION['nomeUsuario']);
 //teste
//print_r($_POST);// you will get an array of all the values


try{
    $conexao = conn_mysql();
}catch(PDOException $excep){
    echo json_encode(array("Erro!: " . $excep->getMessage() . "\n"));
    die();
}

if(!empty($_POST['cidadeOrigem'])){
    $cidOrigem   =  utf8_encode(htmlspecialchars($_POST['cidadeOrigem']));
    $CidDestino  =  utf8_encode(htmlspecialchars($_POST['cidadeDestino']));
    //$passageiros =  utf8_encode(htmlspecialchars($_POST['Passageiros']));
} else {
   echo json_encode(array("Não contém arquivos"));
   die();
}

// Captura os voos disponíveis no banco de dados instrução SQL básica (sem   restrição de nome), 
    $SQLSelect = 'SELECT * FROM voos WHERE voo_CidadeOrigem=? AND   voo_CidadeDestino= ?';

    //prepara a execução da sentença
    $operacao   =  $conexao -> prepare($SQLSelect);

    $pesquisar  =  $operacao -> execute(array($cidOrigem, $CidDestino));

    //$resultados =  $operacao -> fetchAll();//resultado antigo

    $resultados = $operacao->fetchAll(PDO::FETCH_ASSOC);//resultado com array associativo

    // fecha a conexão (os resultados já estão capturados)
    $conexao = null;    

$dados_result = json_encode($resultados);
echo $dados_result;
die();
?>
    
06.07.2015 / 04:32
0

@Guilherme's answer is plausible, apparently this is the problem. Since it may already have solved your problem, I've rewritten your code without using $.ajax because it is not the best solution, I did not quite understand what your code does at all, but I did something similar and GET , but you can modify it to POST if you prefer, if you want to adapt to your projects another day or if someone wants to use something cleaner in jQuery

HTML

<script type="text/javascript" language="JavaScript" src="https://code.jquery.com/jquery-latest.js"></script><formid="exemplo">
<input type="submit" value="Simbora" />
</form>
<body>
<h2></h2>
</body>

SCRIPT:

<script>
    $(function() {

        var n = 0;

        var html = "";

            $("form").on("submit", function(event) {

                event.preventDefault();

                    $.getJSON('dadosJSON.php', function(d) {

                        if(!d.voo_Data){

                            $("h2").html(d.erro);

                        } else {

                            //Buscaria todos os dados da JSON.
                            /*$.each(d, function (k,v) {
                                html += " <strong>"+k+":</strong> "+ v +"<br/>";
                            });*/

                            html += " <strong>Voo Data e Horario</strong> "+ d.voo_Data;

                            html += " <strong>Preco</strong> "+ d.voo_Preco;

                            $("body").html(html); 
                        }
                    });
            });
       });


    </script>

PHP:

<?php 
$data = (object)array("voo_Cod"=>"1",
                      "voo_CidadeOrigem"=>"1",
                      "voo_CidadeDestino"=>"2",
                      "voo_Data"=>"2015-07-13 07:00:00",
                      "voo_Preco"=>"200");

echo json_encode($data);

//Erro 
/*
$erro = (object)array("erro"=>"Houve algum problema");

echo json_encode($erro);*/
    
06.07.2015 / 05:30