JQuery: Trabalhando com JSON

admin 26 de abril de 201626 de abril de 2016 0 Comments JSON, json_encode, MySQL

Neste post compartilho um exemplo simples de como trabalhar com JSON.

JSON segundo Wikipédia: um acrônimo para “JavaScript Object Notation”, é um formato leve para intercâmbio de dados computacionais. JSON é um subconjunto da notação de objeto de JavaScript, mas seu uso não requer JavaScript exclusivamente. O media-type oficial do JSON é application/json e a extensão é .json.

Exemplo de um objeto JSON:

{ "Alunos" : [ 
        { "nome": "João", "notas": [ 8, 9, 7 ]  },
        { "nome": "Maria", "notas": [ 8, 10, 7 ] },
        { "nome": "Pedro", "notas": [ 10, 10, 9 ] } 
    ]
}

Quer saber mais sobre JSON, clique aqui.

— conexao.php

<?php
    $bd_host    = 'nome_do_servidor';
    $bd_user    = 'nome_do_usuario';
    $bd_senha   = 'senha';
    $bd         = 'banco_de_dados';
    $conecta = mysql_connect($bd_host, $bd_user, $bd_senha) or die("Nao Achei o Banco de dados!");
    $bd = mysql_select_db($bd, $conecta) or die("Nao Achei a base de dados!");
?>

— index.php

<? require "function.php"; ?>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
 
    <script type="text/javascript">
        $(document).ready(function(){
            $("select[name='nome']").change(function(){
                var endereco = $("input[name='endereco']");
                var telefone = $("input[name='telefone']");
                // limpa os campos
                endereco.val('');
                telefone.val('');
 
                $.getJSON(
                    'function.php',
                    { id: $( this ).val(), acao : "buscarDados" },
                    function( json )
                    {
                        endereco.val( json.endereco);
                        telefone.val( json.telefone);
                    }
                );
            });
        });
    </script>
</head>
<body>
<form action="" method="post">
    <fieldset style="background-color: #E9ECF5; color:#FFF; font-size: 18px; width:450px; line-height:1.8;">
        <label>Nome: <select name="nome">
                <option value="">-Selecione-</option>
                <?php
                echo montaSelect();
                ?>
            </select></label>
        <label>Endereço: </label> <input type="text" name="endereco" value=""> <br>
        <label>Telefone: </label> <input type="text" name="telefone" value=""> <br>
    </fieldset>
</form>
</body>
</html>

— function.php

<?php
require_once "conexao.php";
 
function montaSelect() {
    $query = "SELECT * FROM TABELA";
    $r = mysql_query($query) or die(mysql_error());
 
    $opt = "";
    while ($dados = mysql_fetch_assoc($r)){
        $opt .= '<option value="'.$dados['id'].'">  '.$dados['nome'].'</option>';
    }
    return $opt;
}
 
$acao = isset($_GET['acao']) ? $_GET['acao'] : '';
if( $acao == 'buscarDados' ) { 
    header("Content-type: application/json");
 
    $id = $_GET['id'];
 
    $query = mysql_query("SELECT * FROM TABELA WHERE id = '$id'") or die("erro na consulta");
    if( mysql_num_rows( $query ) > 0 )   {
        while( $dados = mysql_fetch_array( $query ) ){
            $arr['endereco'] = $dados['endereco'];
            $arr['telefone'] = $dados['telefone'];
        }
    }
    else {
        $arr['endereco'] = "";
        $arr['telefone'] = "";
    }
 
    echo json_encode( $arr );
}
?>

Você pode gostar também

JQuery: Acessando o valor de um combobox – parte 2

JavaScript: Permitir somente números

JQuery: Trabalhando com hover

Deixe um comentário Cancelar resposta