Json is not getting the data

Asked

Viewed 2,445 times

0

I’m doing some tests with ajax, and made a script very simple in php presented below:

index.php

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function()
                {
                    $("select[name='nome']").change(function()
                    {
                        alert('Entrou');
                        var preco = $("input[name='preco']");
                        var teste = $("select[name='nome']").val();
                        //alert(teste);
                        $( preco ).val('Carregando...');


                        //$.getJSON(
                        //'function.php',
                        //{ 
                        //  produto_id: $( "select[name='nome']" ).val()
                        //},
                        //function( json )
                        //{
                        //  $( preco ).val( json.preco );
                        //}
                        $.ajax({ 
                            type: "GET",
                            dataType: 'json', 
                            url: "function.php", 
                            data: "produto_id="+ $("select[name='nome']").val(), 
                            success: function(json){ 
                                //informacoesPessoa = pessoa.split("-"); 
                                //$("#nome").val(informacoesPessoa[0]); 
                                //$("#dataNascimento").val(informacoesPessoa[1]);
                                alert(json.produto_preco); 
                                $("input[name='preco']").val(json.produto_preco);
                            } 
                        });
                    //);
                });
            });
            </script>
    </head>
    <body>
        <form action="" method="post">
            <label>Produto: <select name="nome">
            <option value="">--</option>
            <?php
                include 'function.php';
                echo montaSelect();
            ?>
            </select></label>
            <label>Preço: <input name="preco" type="text" disabled="disabled" value="" /></label>
        </form>
        <div id="test"></div>
    </body>
</html>

function.php

<?php
    $con = mysql_connect('localhost', 'root', 'root');
    mysql_select_db('vendas', $con);

    /**
    * função que retorna o select
    */
    function montaSelect()
    {
        $sql = "SELECT `produto_id`, `produto_nome` FROM `produto` ";
        $query = mysql_query( $sql );

        if( mysql_num_rows( $query ) > 0 )
        {
            while( $dados = mysql_fetch_assoc( $query ) )
            {
                $opt .= '<option value="'.$dados['produto_id'].'">'.$dados['produto_nome'].'</option>';
            }
        }
        else
            $opt = '<option value="0">Nenhum produto cadastrado</option>';

        return $opt;
    }

    /**
    * função que devolve em formato JSON os dados do cliente
    */
    function retorna( $id )
    {
        $id = (int)$id;

        $sql = "SELECT `produto_id`, `produto_preco` FROM `produto` WHERE `produto_id` = {$id} ";
        $query = mysql_query( $sql );

        $arr = Array();
        $row = mysql_fetch_row($query);
        $preco = $row[1];
        //if( mysql_num_rows( $query ) )
        //{
        //  while( $dados = mysql_fetch_object( $query ) )
        //  {
        //      $arr['produto_preco'] = $dados->produto_preco;
        //  }
        //}
        //else
        //  $arr[] = 'Produto: não encontrado';

        echo json_encode($preco);
        //return json_encode( $arr );
    }

    /* só se for enviado o parâmetro, que devolve o combo */
    if( isset($_GET['produto_id']) )
    {
        echo retorna( $_GET['produto_id'] );
    }
?>

When I access the function.php as follows: 

http://localhost/testes/function.php?produto_id=1

It returns me on the screen the correct data: "2.50"

However, the JavaScript is not taking this value and displaying in input. What am I missing?

php ajax json

2 answers

2

Actually it’s not passing a JSON object, it’s simply passing a string. You are calling an attribute of the JSON object called product_preco, the attribute does not exist and neither the object.

You can take the value by simply passing the json variable. There you can change the variable name to make more sense.

 success: function(preco){ 
    $("input[name='preco']").val(preco);
 }

If you want to pass a JSON object through PHP, at least one array has to be created. In your case it would be:

echo json_encode(array('produto_preco' => $preco));

In your case it’s not necessary, but just so you can see how it would look.

1

There are 2 errors preventing your script from working properly

Here on this line:

data: "produto_id="+ $("select[name='nome']").val(),

To catch the value of the selected option use the selector :selected in the elements option who are inside the select:

data: "produto_id="+ $("select[name='nome'] option:selected").val(),

In the request callback, when you try to access the result:

success: function(json){ 
    //informacoesPessoa = pessoa.split("-"); 
    //$("#nome").val(informacoesPessoa[0]); 
    //$("#dataNascimento").val(informacoesPessoa[1]);
    alert(json.produto_preco); 
    $("input[name='preco']").val(json.produto_preco);
}

How PHP is returning 2.50 this is already the variable value json, there is no reason to access json.produto_preco, you can just do:

alert(json);

One more thing, it seems 2.50 is coming as string, if you need to do some arithmetic operation with it in Javascript you should convert it to float in PHP.

$preco = (float)$row[1];

If you need to return multiple values to Javascript at once, then you must create an array in PHP to represent those values in JSON.

Example

PHP

$data = array(
    'produto_preco' => $preco,
    'produto_data' => '05-04-09',
    'produto_nome' => 'Carne'
);

echo json_encode($data);

You can now access data as a Javascript object.

document.write("Nome: " + json.produto_nome);
document.write("Preço: " + json.produto_preco);
document.write("Data: " + json.produto_data);

Browser other questions tagged php ajax json

You are not signed in. Login or sign up in order to post.