0

Estou fazendo alguns testes com ajax, e fiz um script bem simples em php apresentado abaixo:

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'] );
    }
?>

Quando eu acesso o function.php da seguinte forma:

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

Ele me retorna na tela o dado correto: "2.50"

Porém, o JavaScript não está pegando este valor e exibindo no input. O que estou errando?

2 Respostas 2

2

Na verdade não tá passando um objeto JSON, está passando simplesmente uma string. Você está chamando um atributo do objeto JSON chamado produto_preco, o atributo não existe e nem o objeto.

Você pode pegar o valor simplesmente passando a variável json. Ai você pode mudar o nome da variável pra ter mais sentido.

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

Se você quiser passar um objeto JSON através do PHP, tem que ser criado pelo menos um array. No seu caso ficaria:

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

No seu caso não é necessário, mas só pra você ver como que ficaria.

1

Há 2 erros impedindo seu script de funcionar corretamente

Aqui nesta linha:

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

Para pegar o value da option selecionada use o seletor :selected nos elementos option que estão dentro do select:

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

No callback da solicitação, quando você tenta acessar o resultado:

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);
}

Como o PHP está retornando 2.50 esse já é o valor da variável json, não há porque acessar json.produto_preco, você pode fazer simplesmente:

alert(json);

Mais uma coisa, ao que parece o 2.50 está vindo como string, se você for precisar fazer alguma operação aritmética com ela no Javascript você deve convertê-la para float no PHP.

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

Se você precisa retornar vários valores para o Javascript de uma só vez, então você deve criar um array no PHP para representar esses valores em JSON.

Exemplo

PHP

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

echo json_encode($data);

Agora você pode acessar os dados como um Objeto Javascript.

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .