| |
Aug 09
Hoje irei dar um exemplo de como usar JSON com Prototype em uma chamada via Ajax. Não estou muito acostumado com o Prototype mas comecei a usar por ser um especificação de um projeto que estou trabalhando atualmente.
O JSON é um acrônimo para “JavaScript Object Notation” e é um padrão para a troca de mensagens. JSON é muito usado em chamadas Ajax por ser mais simples e mais leve que SOAP que usa XML.
Abaixo segue um exemplo de um objeto JSON que irei usar neste tutorial.
Crie um arquivo chamado conteudo.htm e insira o código abaixo.
{ "jogos" : [
{ "nome": "World of Warcraft", "preco": "49,90" },
{ "nome": "Diablo 3", "preco": "89,90" },
{ "nome": "StarCraft 2", "preco": "49,90" }
]
}
Agora basta criar um arquivo com o nome index.htm e inserir o conteúdo abaixo.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
</head>
<body>
<input type="button" name="pesquisar" onclick="pesquisar();" value="pesquisar"/>
<script>
function pesquisar () {
var request = new Ajax.Request('conteudo.htm', {
'method' : 'post',
'parameters' : {
'codigo' : '1'
},
'onComplete' : function(response) {
var text = response.responseText.stripTags();
// Transformo o texto em objeto
var objeto = text.evalJSON();
var jogos = objeto.jogos;
var str = "";
jogos.each(function(jogo) {
str += jogo.nome + ' ';
str += jogo.preco + '\n';
});
alert(str);
}
});
}
</script>
</body>
</html>
Agora é necessário que os dois arquivos estejam no mesmo diretório para que o exemplo funcione.
Clicando no botão pesquisar será feita uma consulta via Ajax para conteudo.htm retornando os valores do arquivo.
Caso tenha alguma duvida uma outro opinião sobre o Post deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais e Posts aqui apresentados.
Tags: ajax, javascript, JSON, Prototype, SOAP, XML
Feb 08
Desde semana passada o antigo webservice dos correios parou de funcionar com PAC.
Foi feita a correção do código e agora o PAC esta funcionando novamente.
Sistema para Calcular Frete 1.1
Documentação para utilizar o webservice dos Correios para efetuar o calculo de forma personalizada.
SCPP_Manual_Implementacao_Calculo_Remoto_de_Precos_e_Prazos
Abaixo segue o código para manipular os dados do webservice usando o PHP.
Segue o exemplo do código abaixo funcionando.
<?php
/**
* Faz consulta no webservice dos correios e gera array dos valores.
* @copyright Phaneronsoft
* @author Marcelo Korjenioski - faleconosco@phaneronsoft.com
* @see http://www.phaneronsoft.com
* @filesource correios.php
* @version 1.0
*/
// PESO: Peso total do pacote em Quilos, caso seja menos de 1Kg, ex.: 300g, coloque 0.300
define('PESO',0.300);
// COMPRIMENTO: comprimento do volume em centímetros - somente número de 16 a 60
define('COMPRIMENTO',30);
// ALTURA: altura do volume em centímetros - somente número de 2 a 60
define('ALTURA',15);
// LARGURA: largura do volume em centimetros - somente número de 5 a 60
define('LARGURA',20);
// CODIGO_SERVICO: É possivel fazer mais de uma consulta ao mesmo tempo, basta separar os códigos por virgula.
// Neste caso PAC 41106 e SEDEX 40010
define('CODIGO_SERVICO','41106,40010');
// CEP_ORIGEM: seu CEP com 8 dígitos - somente números
define('CEP_ORIGEM','81010210');
// CEP_DESTINO: CEP do seu cliente com 8 dígitos - somente números
define('CEP_DESTINO','60245965');
// Crio um objeto para manipular o XML.
$doc = new DomDocument;
// Carrega o arquivo XML com um arquivo DOMDocument
$doc->Load("http://shopping.correios.com.br/wbm/shopping/script/CalcPrecoPrazo.aspx?StrRetorno=xml&nCdServico=" . CODIGO_SERVICO . "&nVlPeso=" . PESO . "&sCepOrigem=" . CEP_ORIGEM . "&sCepDestino=" . CEP_DESTINO . "&nCdFormato=1&nVlComprimento=" . COMPRIMENTO . "&nVlAltura=" . ALTURA . "&nVlLargura=" . LARGURA);
// Defino o nome do elemento pai (root).
$root = $doc->getElementsByTagName('cServico');
// Carrega o arquivo XML com um arquivo DOMDocument
$correios = "http://shopping.correios.com.br/wbm/shopping/script/CalcPrecoPrazo.aspx?StrRetorno=xml&nCdServico=" . CODIGO_SERVICO . "&nVlPeso=" . PESO . "&sCepOrigem=" . CEP_ORIGEM . "&sCepDestino=" . CEP_DESTINO . "&nCdFormato=1&nVlComprimento=" . COMPRIMENTO . "&nVlAltura=" . ALTURA . "&nVlLargura=" . LARGURA;
// Defino o nome do elemento pai (root).
$root = $doc->getElementsByTagName('cServico');
// Defino o nome dos elementos filhos no arquivo XML que eu desejo.
$children = array('Valor','PrazoEntrega');
// Faço um loop para pegar todos os elementos pai (root) encontrados.
$valor = array();
for ($i=0; $i < $root->length; $i++) {
// Pega o valor do atributo do elemento pai (root).
$id = $root->item($i)->getElementsByTagName('Codigo')->item(0)->nodeValue;
// Busca por elementos filhos (child) definidos no array
foreach ($children as $child) {
$valor[$id][$child] = $root->item($i)->getElementsByTagName($child)->item(0)->nodeValue;
}
}
echo '<pre>';
var_dump($valor);
Caso tenha alguma duvida deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
Tags: CEP, correios, Frete, manual, PAC, Sedex, webservice
Nov 20
Descobrir ID de elemento através de uma Class usando JQuery é o tema de hoje.
Eu não sou o tipo do programador que fica se preocupando com a quantidade de linhas por arquivo.
Gosto mesmo é de criar um código simples e de fácil manutenção. Esta semana estava querendo colocar
um efeito “slide” em algumas listas porem não queria criar uma função para cada lista. Então resolvi
criar uma classe comum para elas e atribuir IDs para os botões e para as listas. Desta maneira foi simples
resolver meu problema pois posso identificar os IDs dos elementos através da classe.
Segue o código abaixo para explicar melhor a situação.
Segue o exemplo funcionando
<head>
<title>Descobrir id de elemento usando uma classe com JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
ul {list-style:none;}
* {margin:0;padding:0;border:0px;}
html {height:100%;}
.agrupa_programacao {float:left;display:inline;width:970px;margin-top:30px;}
.divisao_programacao {float:left;display:inline;width:230px;margin-right:10px;}
.lista_programacao,.lista_programacao2 {float:left;display:inline;width:228px;margin-top:5px;background:#fff;border:1px solid #bbb;}
.lista_programacao2 {margin-top:0px;border-top:0px}
.tit_programacao, .tit_programacao2, .tit_programacao3 {float:left;display:inline;width:198px;height:20px;background:#acbcc0 url(../img/seta.jpg) no-repeat 9px 16px;padding:12px 0 12px 30px;text-align:left;font:14px Verdana, Arial, Helvetica, sans-serif;font-weight:bold;color:#fff;border-bottom:1px solid #fff;}
.tit_programacao2 {color:#133c8b;background:#f4f1f1;}
.tit_programacao3 {background:#d9eff3 url(../img/seta2.gif) no-repeat 9px 7px;padding:5px 0 5px 30px;color:#133c8b;font:bold 12px Verdana, Arial, Helvetica, sans-serif;}
h3.tit_programacao3{border-left:1px solid #BBBBBB;border-right:1px solid #BBBBBB;cursor:pointer;}
.txt_programacao, .txt_programacao2, .txt_programacao3 {float:left;display:inline;width:198px;padding:10px 15px 10px 15px;background:#f4f1f1;font:11px Verdana, Arial, Helvetica, sans-serif;color:#5e5e5e;border-bottom:1px solid #fff;}
.txt_programacao2 {background:#d7d7d7;}
.txt_programacao3 {background:#fff;}
</style>
</head>
<body>
<div>
<h3 id="frutas">Frutas</h3>
<ul id="frutas_lista">
<li id="1">Abacaxi</li>
<li id="2">Pera</li>
<li id="3">Maça</li>
</ul>
<h3 id="verduras">Legumes</h3>
<ul id="verduras_lista">
<li id="1">Alface</li>
<li id="2">Couve</li>
<li id="3">Cenoura</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){ // Inicio o script apenas quando toda a pagina estiver carregada.
// Atribuo a função onclick em todos os elementos com a classe informada
$(".tit_programacao3").click(function () {
//Pego o ID do elemento.
var id = $(this).attr('id');
// Como defini os ids para o titulo e lista, apenas faço uma
// concatenação para identificar a lista para receber a ação.
if ($("#" + id + "_lista").is(":hidden")) {
$("#" + id + "_lista").slideDown("normal");
} else {
$("#" + id + "_lista").slideUp("normal");
}
});
});
</script>
</body>
</html>
Associando a classe com id é possível reduzir a quantidade de código facilitando a manutenção e agilizando o desenvolvimento.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
É isso pessoal uma ótima semana e até o próximo post.
Tags: Descobrir, JQuery, Listas
Oct 28
Hoje estava conversando com um amigo que começou a estudar AJAX
para fazer uma entrevista de emprego para programador Jr e que pediam conhecimentos básicos de PHP, AJAX e JQuery.
Perguntei para ele o que você entende por AJAX?
“É um bagulho que pega informações do lado servidor sem
precisar recarregar a página.”
A resposta esta certa e o conceito é este.
Então hoje resolvi criar um post sobre o que é o tal de AJAXem um
exemplo pratico e simples de entender que mostrei para meu amigo.
Vamos usar o JQuery para fazer a conexão AJAX.
No exemplo vamos pegar o conteúdo de uma pagina “texto.html” e adicionar
o conteúdo na página “index.html” em uma tag span.
Vamos criar uma página index.html com o código abaixo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>EXEMPLO BASICO DO USO DO AJAX COM JQUERY</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<input type="button" onclick="ajax();" value="Pegar texto" name="Pegar texto" />
<br />
<span id="conteudo_ajax"></span>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ajax () {
// Caso queira limpar o valor do elemento antes de adicionar remova o comentario abaixo.
//$("#conteudo_ajax").empty();
jQuery.ajax({
type: "get", // Defino o método de envio POST / GET
url: 'texto.html', // Informo a URL que será pesquisada.
success: function(html){
$("#conteudo_ajax").append(html); // Adiciono o valor dentro do elemento.
}
});
}
</script>
Agora crie uma página texto.html com o texto para pesquisa
Texto que foi pego usando AJAX.
O código é simples mas já dá uma idéia de como funciona o AJAX para quem esta começando a estudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
É isso pessoal uma ótima semana e até o próximo post.
Tags: ajax, iniciante, JQuery, PHP
Sep 03
Para executar o script abaixo é necessário o JQuery
http://docs.jquery.com/Downloading_jQuery
No exemplo estou usando o JQuery do Google APIs.
Segue um exemplo em funcionamento.
</code></code></code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Phaneronsoft - Verificar valores de input checkbox com JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="checkbox" value="1" name="id[]" class="cinput">1<br>
<input type="checkbox" value="2" name="id[]" class="cinput">2<br>
<input type="checkbox" value="3" name="id[]" class="cinput">3<br>
<input type="checkbox" value="4" name="id[]" class="cinput">4<br>
<input type="checkbox" value="5" name="id[]" class="cinput">5<br>
<input type="checkbox" value="6" name="id[]" class="cinput">6<br>
<input type="checkbox" value="7" name="id[]" class="cinput">7<br>
<button type="button" id="botao">Verificar</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="application/javascript">
function checkBox() {
var files = '';
// Procura em todos os elementos com a classe cinput na página.
$(".cinput:checked").each(function(){
//Verifica se input checkbox esta marcado
//if(this.checked) {
// Adiciona valor do checkbox
files = files + ' [' + this.value + '] ';
//}
});
alert(files);
}
// Adiciona evento ao botão com a função bind
$("#botao").bind("click", function(){
checkBox();
});
</script>
</body>
</html>
Caso tenha alguma duvida deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Phaneronsoft - Verificar valores de input checkbox com JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="checkbox" value="1" name="id[]" class="cinput">1<br>
<input type="checkbox" value="2" name="id[]" class="cinput">2<br>
<input type="checkbox" value="3" name="id[]" class="cinput">3<br>
<input type="checkbox" value="4" name="id[]" class="cinput">4<br>
<input type="checkbox" value="5" name="id[]" class="cinput">5<br>
<input type="checkbox" value="6" name="id[]" class="cinput">6<br>
<input type="checkbox" value="7" name="id[]" class="cinput">7<br>
<button type="button" id="botao">Verificar</button>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=“text/javascript”></script>
<script type=“application/javascript”>
function checkBox() {
var files = ”;
// Procura em todos os elementos com a classe cinput na página.
$(“.cinput”).each(function(){
//Verifica se input checkbox esta marcado
if(this.checked) {
// Adiciona valor do checkbox
files = files + ’ [‘ + this.value + ’] ‘;
}
});
alert(files);
}
// Adiciona evento ao botão com a função bind
$(“#botao”).bind(“click”, function(){
checkBox();
});
</script>
</body>
</html>
|
|
Comentários Recentes