Introdução ao JQuery e AJAX

Write Less

DO MORE
Introdução ao
JQuery e AJAX
Prof: Sérgio Souza Costa

Sobre mim
Sérgio Souza Costa
Professor - UFMA
Doutor em Computação Aplicada (INPE)
prof.sergio.costa@gmail.com
https://sites.google.com/site/profsergiocosta/home
http://www.slideshare.net/skosta/presentations?order=popular
https://twitter.com/profsergiocosta
http://gplus.to/sergiosouzacosta

"Considered a “toy” language by serious web
developers for most of its lifetime, Java-Script has
regained its prestige in the past few years as a result
of the renewed interest in Rich Internet Applications
and Ajax technologies".
John Resig - jQuery in Action

O que é JQuery ?

JavaScript

HTML/
Browser

O que é JQuery ?

JavaScript

DOM/
BOM

HTML/
Browser

O que é JQuery ?

JavaScript

JQuery

DOM/
BOM

HTML/
Browser

O que é JQuery ?

JavaScript

JQuery

DOM/
BOM

Independente de browser

HTML/
Browser

O que é JQuery ?

JavaScript

JQuery

Independente de

DOM/
BOM

HTML/
Browser

JQuery é uma
biblioteca JavaScript,
ou seja, um conjunto
de
browser objetos e funções
em um arquivo js.

Como usar ?
Matando a ansiedade com um "Hello World"
Acesse http://jquery.com/, e baixem o arquivo JQuery

Como usar ?
ou diretamente:
http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

Como usar ?
ou diretamente:
ou baixem o hello_jquery.rar, no site

Como usar ?
ou diretamente:
ou baixem o hello_jquery.rar

O "min" significa que este
arquivo foi "minificado", ou
seja, eliminado todos os
espaçamentos, tabs ...

Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" >
equivalente ao
$(document).ready(
window.onload
function(){
$ ("body").html ("<p>Ola Mundo !!</p>")
})
</script>
</head>
<body>
</body>
</html>

Hello World

Observem o uso de
funções como
parâmetros e de
funções anônimas.

<!DOCTYPE html>
<html>
<head>
<title></title>
equivalente ao
$(document).ready(
window.onload
function(){
})
</script>
</head>
<body>
</body>
</html>

Hello World - 2 - Atalho "document
ready"
<!DOCTYPE html>
<html>
<head>
<title></title>
$(
function(){
}
)
</script>
</head>
<body>
</body>
</html>

equivalente ao
window.onload

Hello World - 3 - Sem "innerHtml"
<!DOCTYPE html>
<html>
<head>
<title></title>
$(document).ready(function(){
$ ("<p/>", {
1. Cria a tag <p>
text: "Ola Mundo !!"
2. Atribui a ela o texto
}).appendTo("body")
3. Adiciona a "body"
})
</script>
</head>
<body>
</body>
</html>

Hello World - 3 - Sem "innerHtml"
Matado a
ansiedade, vamos
entender melhor
isso ...

<!DOCTYPE html>
<html>
<head>
<title></title>
$(document).ready(function(){
$ ("<p/>", {
1. Cria a tag <p>
text: "Ola Mundo !!"
2. Atribui a ela o texto
}).appendTo("body")
3. Adiciona a "body"
})
</script>
</head>
<body>
</body>
</html>

Para quê ?

Produtividade = Poucas linhas de códigos

Para quê ?

Cross browser
Produtividade = Poucas linhas de códigos

Para quê ?
DOM
Cross browser
Produtividade – Poucas linhas de códigos

Para quê ?

CSS

DOM

Cross browser

Para quê ?
CSS
DOM

Cross browser

AJAX

Para quê ?

DOM

PLUGINS
Cross browser


AJAX

CSS

Jquery
●
●
●
●
●
●

Released Jan. 2006
Foco na manipulação de DOM
Suporte a Events, Ajax e Animações
Código sucinto, arquivos pequenos
Extensível via plugin
Cross browser (se comporta da mesma maneira
sobre diferentes browser)

Ranking das bibliotecas JavaScript

Jquery + Programação Funcional
JQuery foi desenvolvido usando muitas das
suas características como linguagem de programação
funcional
Funções como parâmetros
Funções como retorno

funcional
Funções anônimas

funcional

Closures

Funções anônimas

“Thank God for closures!”.
John Resig

Alguns slides a partir daqui
foram baseados em:
jQuery Essentials by Marc Grabanski
http://marcgrabanski.com/presentations/jquery-essentials.pdf

Mais fácil escrever do que
códigos JavaScript puros.

Ocultando divs com JavaScript e DOM
divs = document.getElementByTagName(‘div’);
for (i = 0; i < divs.length; i++) {
divs[i].style.display = ‘none’;
}

1. Selecionava todos <div>
2. Para cada um
}
3. Mudava o estilo, css

Ocultando divs com JQuery
$(“div”).hide();

}

Ocultando divs com JQuery
$(“div”).hide();

Filosofia JQuery

#1. PROCURE algo no HTML

Filosofia JQuery

#1. PROCURE algo no HTML
#2. FAÇA algo com ele

PROCURE

$("div")

Procurando
elementos...

Use o seletor $()
$(“#myId”)

Use o seletor $()
$(“#myId”)

$(“.myClass”)

Use o seletor $()
$(“#myId”)

$(“.myClass”)

$(“table”)

Exemplos de seletores
$(“#content”) todos elementos com id content

$(“li:first”) o primeiro item de uma lista

$(“a[target=_blank]”) todos links onde target “_blank”

$(“form[id^=step]”) todos "forms" onde id começa com “step”

$(“form[id^=step]”) todos "forms" onde id começa com “step”
$("img", cell) todos as imagens dentro de cell

Seleção com composição:
$(“#myId, .myClass, table”)

Procure

Faça

$(“div”).hide()

Vamos ver
....

teste_jquery_1.html

Encadeamento
$("#div_1").addClass("redbox")

Encadeamento
$("#div_1").addClass("redbox").fadeOut();

Encadeamento

Seleção retorna um objeto, então
podemos aplicá-las em outras
consultas ou métodos.

Encadeamento

Seleção retorna um objeto, então
podemos aplicá-las em outras
consultas ou métodos.

Testando .....

Encadeamento
$('#content').find('h3').eq(2).html('o novo texto do terceiro h3!');

Encadeamento
$('#content').find('h3').eq(2).html('o novo texto do terceiro h3!');

Formatando
$('#content')
.find('h3')
.eq(2)
.html('o novo texto do terceiro h3!');

Salvando seleções
var $divs = $('div');

Salvando seleções
$divs.addClass(“redbox”)

Salvando seleções
O JQuery não salva
as consultas, se for
precisar do resultado
dessa consulta,
salve-a em
uma variável

Salvando seleções
O JQuery não salva
as consultas, se for
precisar do resultado
dessa consulta,
salve-a em
uma variável

Não existe nada
especial no nome
$divs, o $ é apenas
uma notação para
diferenciar o objetos
JQuery

Checando o retorno de uma seleção
Uma seleção sempre retornara um objeto, então o teste
a seguir será sempre verdadeiro:
if ($('div.foo')) { ... }

Checando o retorno de uma seleção
Uma seleção sempre retornara um objeto, então o teste
a seguir será sempre verdadeiro:
if ($('div.foo')) { ... }
Ao invés disso, testem o tamanho do objeto:
if ($('div.foo').length) { ... }

Refinando & Filtrando Seleções

$('div.foo').has('p'); // o elemento div.foo que contém <p>'s

$('h1').not('.bar'); // elementos h1 que não têm a classe bar

$('ul li').filter('.current'); // itens de listas não-ordenadas com a classe
current

current
$('ul li').first(); // somente o primeiro item da lista não ordenada

current
$('ul li').eq(5); // o sexto item da lista

Oculte o primeiro

item das listas do
current
arquivo
teste_jquery_1.html

$('ul li').eq(5); // o sexto item da lista

Seletores relacionados à formulários
:button Seleciona elementos do tipo <button>
:checkbox Seleciona inputs com type="checkbox"
:checked Seleciona inputs selecionados
:disabled Seleciona elementos de formulário
desabilitados
:enabled Seleciona elementos de formulário habilitados

Seletores relacionados à formulários
:input Seleciona <input>, <textarea>, e elementos
<select>
:radio Selecionam inputs com type="radio"
:selected Seleciona inputs que estão selecionados
:submit Seleciona inputs com type="submit"
:text Seleciona inputs com type="text"
...

Um Método, Diferentes usos
$(...).html();

$(...).html();
$(...).html(“<p>hello</p>”);

$(...).html();
$(...).html(“<p>hello</p>”);

$(...).html(function(i){
return “<p>hello “ + i + “</p>”;
});

$(...).html();
$(...).html(“<p>hello</p>”);

$(...).html(function(i){
return “<p>hello “ + i + “</p>”;
});

Lembram da
sobrecarga ?
Este método é um
exemplo de
"sobrecarga".

Getters & Setters
O jQuery “sobrecarrega” seus métodos, então o método usado
para setar um valor geralmente tem o mesmo
nome do método usado para obter um valor

Getters & Setters
nome do método usado para obter um valor.
O método $.fn.html usado como setter
$('h1').html('olá mundo');

Getters & Setters
nome do método usado para obter um valor.
O método $.fn.html usado como setter
$('h1').html('olá mundo');
O método html usado como getter
$('h1').html();

JQuery Métodos
Movendo
append(), appendTo(), before(), after(),
Atributos
css(), attr(), html(), val(), addClass()
Eventos
bind(), trigger(), unbind(), live(), click()
Travessia
find(), is(), prevAll(), next(), hasClass()
Efeitos
show(), fadeOut(), toggle(), animate()
Ajax

Método $()
Podemos passar uma função para o método $(), que será
executada após o HTML ser carregado.

Método $()
$(function(){
});

Método $()
$(function(){
// código será executado após o carregamento do DOM
});

Método $()
$(function(){
// código será executado após o carregamento do DOM
});
Nota: Esse é um atalho para:
$(document).ready(function(){ });

Método $()
Usando funções anônimas:
$(function() { alert('pronto!'); });

Método $()
Usando funções anônimas:
$(function() { alert('pronto!'); });
Função nomeada
f = function () {alert('pronto!'); }
$(f);

Movendo elementos
Pegue um elemento com ID foo e adicione algum
HTML.
$(“#foo”)
<html>
<body>
<div>jQuery</div>
<div id=”foo”>example</div>
</body>
</html>

Movendo elementos
HTML.
$(“#foo”).append(“<p>test</p>”);
<html>
<body>
<div>jQuery</div>
</body>
</html>

Movendo elementos
HTML.
$(“#foo”).append(“<p>test</p>”);
<html>
<body>
<div>jQuery</div>
<div id=”foo”>example<p>test</p></div>
</body>
</html>

Movendo elementos
Move parágrafos para o elemento com id “foo”

$(“p”)
<html>
<body>
<div>jQuery
<p>moving</p>
<p>paragraphs</p>
</div>
</body>
</html>

Movendo elementos

$(“p”).appendTo(“#foo”);
<html>
<body>
<div>jQuery
<p>moving</p>
<p>paragraphs</p>
</div>
</body>
</html>

Movendo elementos

$(“p”).appendTo(“#foo”);
<html>
<body>
<div>jQuery
</div>
<div id=”foo”>example
<p>moving</p>
<p>paragraphs</p></div>
</body>
</html>

Copiando elementos
Copiando parágrafos para o elemento com id “foo”

$(“p”)
<html>
<body>
<div>jQuery
<p>moving</p>
<p>paragraphs</p>
</div>
</body>
</html>

Copiando elementos

$(“p”).clone()
<html>
<body>
<div>jQuery
<p>moving</p>
<p>paragraphs</p>
</div>
</body>
</html>

Copiando elementos

$(“p”).clone().appendTo(“#foo”);
<html>
<body>
<div>jQuery
<p>moving</p>
<p>paragraphs</p>
</div>
</body>
</html>

Copiando elementos

$(“p”).clone().appendTo(“#foo”);
<html>
<body>
<div>jQuery
<p>moving</p>
<p>paragraphs</p>
</div>
<div id=”foo”>example
<p>moving</p>
<p>paragraphs</p></div>
</body>
</html>

Criando elementos

$(“<p>”, {text:"teste"})
<html>
<body>
<div id=”foo”>
</div>
</body>
</html>

Criando elementos

$(“<p>”, {text:"teste"}).appendTo(“#foo”);
<html>
<body>
<div id=”foo”>
</div>
</body>
</html>

Criando elementos

$(“<p>”, {text:"teste"}).appendTo(“#foo”);
<html>
<body>
<div id=”foo”>
<p>teste</p>
</div>
</body>
</html>

Atributos
Get
.attr(‘id’)
.html()

Atributos
Get
.attr(‘id’)
.html()
.css(“fontSize”)

Atributos
Get

Set

.attr(‘id’)

.attr(‘id’, ‘foo’)

.html()
.width()

Atributos
Get

Set

.attr(‘id’)


.html()

.html(“<p>hi</p>”)

.width()

Atributos
Get

Set

.attr(‘id’)


.html()



.css(“fontSize”, “100px”)

.width()

Atributos
Get

Set

.attr(‘id’)


.html()




.width()

.width(60)

Atributos
Get

Set

.attr(‘id’)


.html()




.width()

.width(60)

Largura do primeiro
elemento

Atributos
Get

Set

.attr(‘id’)


.html()




.width()

.width(60)

Largura do primeiro
elemento

Largura de todos
elemento

Atributos
Seta a borda para 1px black
$(...).css(“border”, “1px solid black”);

Atributos
Seta varias propriedades CSS.
$(...).css({
“background”: “yellow”,
“height”: “400px”
});

Atributos
Seta varias propriedades CSS.
$(...).css({
“background”: “yellow”,
“height”: “400px”
});
Nota: $.fn.css é útil, mas, ele geralmente deve ser evitado como um setter. Pois
você não quer informação de apresentação no seu JavaScript. Escreva regras
CSS para classes que descrevam os vários estados visuais, e então mude a
classe no elemento que você quer afetar.

Atributos
Trabalhando com classes
$h1.addClass('big');
$h1.removeClass('big');

Atributos
$h1.toggleClass('big');

Adiciona se ainda não
foi adiciona e remove
caso contrário.

Atributos
$h1.toggleClass('big');
if ($h1.hasClass('big')) { ... }

Atributos
Mude HTML com um novo parágrafo.
$(...).html(“<p>I’m new</p>”);

Atributos
$(...).html(“<p>I’m new</p>”);
<div>whatever</div> muda para:
<div><p>I’m new</p></div>

Atributos
$(...).html(“<p>I’m new</p>”);
Seta o atributo “checked” para checked.
$(“:checkbox”).attr(“checked”,”checked”);

Atributos
$(...).html(“<p>I’m new</p>”);
Seta o value para 3.
$(...).val(“3”);

Atributos
$(...).html(“<p>I’m new</p>”);
Usado para pegar um valor
de um elemento de um
formulário. Ex. text.
$(...).val(“3”);

Atributos
$(...).html(“<p>I’m new</p>”);
Pega o valor.
$(...).val();
$(...).val(“3”);

Eventos
Quando o botão for clicado, faça algo.
$(“button”).click(function(){
facaAlgo();
});

Eventos
Quando o botão for clicado, faça algo.
$(“button”).click(function(){
facaAlgo();
});
Usando o método bind:
$("button").bind('click', function() {
facaAlgo();
});

Eventos
Hover, funções para o mouse in e mouseout
$("span").hover(
function () {
$(this).css ("color", "red");
},
function () {
$(this).css ("color", "black");
})

Funções utilitárias
.trim

Remove espaços em branco à esquerda e à
direita.
$.trim(" muitos espaços em branco extras ");
// returns "muitos espaços em branco extras"

$.each

Itera sobre arrays e objetos.
$.each([ 'foo', 'bar', 'baz' ], function(idx, val) {
console.log('elemento ' + idx + 'é ' + val);
});
$.each({ foo : 'bar', baz : 'bim' }, function(k, v) {
console.log(k + ' : ' + v);
});

Funções utilitárias
$.inArray

var meuArray = [ 1, 2, 3, 5 ];
if ($.inArray(4, meuArray) !== -1) {
console.log('encontrei!');
}

Exercício 1
Baixem o arquivo Diga_incompleto, e insiram os
códigos que permitirá o seguinte comportamento.

Exercício 2
Gerar tabela dinamicamente

Exercício e
Façam uma calculadora usando o que foi discutido até aqui.
Obs: para mostrar ou ocultar um objeto, use show() e
hide ()

Caso o usuário entre com valores inválidos

Travessia
Uma vez que você tem uma seleção do jQuery, você pode
encontrar outros elementos usando sua seleção
como ponto de início.

Travessia
Uma vez que você tem uma seleção do jQuery, você pode
encontrar outros elementos usando sua seleção
como ponto de início.
$('h1').prevAll();
$('h1').next('p');
$('div:visible').parent();
$('input[name=first_name]').closest('form');
$('#myList').children();
$('li.selected').siblings();
$('h1').find('p');

Travessia
Pegue as celulas anteriores a #myCell.
$(“#myCell”)
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td id=”myCell”></td>
<td></td>
</tr></table>
</body>

Travessia
$(“#myCell”).prevAll()
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td></td>
</tr></table>
</body>

Travessia
$(“#myCell”).prevAll().andSelf();
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td></td>
</tr></table>
</body>

Travessia
$(“#myCell”).siblings();
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td></td>
</tr></table>
</body>

Travessia
$(“#myCell”).siblings().andSelf();
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td></td>
</tr></table>
</body>

Travessia
$(“#myCell”).parent();
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td></td>
</tr></table>
</body>

Travessia
$(“table”);
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td></td>
</tr></table>
</body>

Travessia
$(“table”).find ("td");
<html>
<body>
<table><tr>
<td></td>
<td></td>
<td></td>
</tr></table>
</body>

Efeitos/Animação
Tipos de efeitos

Efeitos/Animação
Tipos de efeitos

#1. Hide e Show

Efeitos/Animação
Tipos de efeitos

#1. Hide e Show
#2. Fade In e Out

Efeitos/Animação
Tipos de efeitos

#1. Hide e Show
#2. Fade In e Out
#3. Slide Up e Down

Efeitos/Animação
Hide e show

$(...).click(function(){
$(...).hide();
});

Efeitos/Animação
Hide e show

$(...).hide();
});
$(...).hide("slow"); ou $(...).hide(5000);

Efeitos/Animação
Hide e show

$(...).hide();
});
$(...).hide("slow"); ou $(...).hide(5000);
$(...).show() $(...).show("slow") $(...).show(500);

Efeitos/Animação
Para cada click, slide up / slide down um elemento

$(...).slideToggle();
});

Efeitos/Animação
});

Efeitos/Animação
});
Animar elementos é alterar a apresentação, atributos CSS.
Essa animação irá durar 1 segundo.
$(...).animate({ "fontSize": "400%" }, 1000);

Efeitos/Animação
});
Animar elementos é alterar a apresentação, atributos CSS.
Essa animação irá durar 1 segundo.
$(...).animate({ "fontSize": "400%" }, 1000);
Fade to 30% de opacidade
$(...).fadeTo(500, 0.3);

Efeitos/Animação
$.fn.show Mostra o elemento selecionado.
$.fn.hide Esconde o elemente selecionado.
$.fn.fadeIn Anima a opacidade dos elementos
selecionados para 100%.
$.fn.fadeOut Anima a opacidade dos elementos
selecionados para 0%.

Efeitos/Animação
$.fn.slideDown Mostra os elementos selecionados
com um deslizamento vertical.
$.fn.slideUp Esconde os elementos selecionados
com um deslizamento vertical.
$.fn.slideToggle Mostra ou esconde os elementos
selecionados com um deslizamento
vertical, dependendo se os elementos atualmente
estão visíveis.

Efeitos/Animação
Experimentem os métodos com o código abaixo
...
<button id="b1">Click</button>
<p id="p1">ANIMADO</p>
...

Efeitos/Animação
Usem os recursos de animação para mostrar e
ocultar as mensagens de erro da calculadora.

Plugins
$.fn.OlaMundo = function(){
return this.each(function(){
// faça algo com a seleção
});
}

Plugins
$(this).html("Plugin Ola Mundo");
});
}
$(“div”)
<html>
<body>
<div></div>
<div></div>
</body>
</html>

Plugins
$(this).html("Plugin Ola Mundo");
});
}
$(“div”).OlaMundo();
<html>
<body>
<div>Plugin Ola Mundo</div>
<div>Plugin Ola Mundo</div>
</body>
</html>

Plugins
Existem diversos plugins, com diferentes objetivos.
http://plugins.jquery.com/

Vocês podem fazer o seu próprio ou estender os já existentes.

Exercício
Façam um programa que realce uma seleção:

texto a realçar
$("span").realce()
texto a realçar

Mais exercicios
Baixem o jogo quebra cabeça e mapeiem o seu código
para JQuery:

O que é Ajax ?

Assyncronous

JavaScript

O que é Ajax ?

Assyncronous
JavaScript And

XML

O que é Ajax ?

Assyncronous

JavaScript And
XML

O que é Ajax ?

Assyncronous

JavaScript And
XML
+
XHTML
+ JSON
+ CSS

O que é AJAX ?
Não é uma linguagem

O que é AJAX ?

Uso de tecnologias já existentes

O que é AJAX ?


XHtmllRequest

O que é AJAX ?

XHtmllRequest

+ JavaScript

O que é AJAX ?

XHtmllRequest

+ JavaScript + DOM

Meu primeiro AJAX
Criar uma requisição:
function GetXmlHttpObject() {
var xmlHttp=null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

Meu primeiro AJAX
Criar uma requisição:
function GetXmlHttpObject() {
var xmlHttp=null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

Só existo por
causa do IE

Meu primeiro AJAX
Função que é chamado após a requisição for concluída.
Callback.
function stateChanged() {
if (xmlHttp.readyState==4) {
document.getElementById("a1").innerHTML = xmlHttp.responseText;
}
}

Meu primeiro AJAX
Função que "monta" a requisição.
function olamundo() {
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null) {
alert ("Your browser does not support AJAX!");
return;
}
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET","ajax_test.htm",true);
xmlHttp.send(null);
}

window.onload = olamundo()

Lembram do Hello World do JQuery ?
$ ("#a1")
</html>
</head>
<body>
<div id="a1"></div>
</body>
</html>

Lembram do Hello World do JQuery ?
$ ("#a1").html ("<p>Ola Mundo</p>")
</html>
</head>
<body>
<div id="a1"><p>Ola Mundo</p></div>
</body>
</html>

Hello World Ajax - JQuery
Dado uma pagina ajax_test.htm
<p>Ola mundo</p>

</html>
</head>
<body>
<div id="a1"></div>
</body>
</html>

Hello World Ajax - JQuery
<p>Ola mundo</p>
$.ajax({
url: "ajax_test.htm",
success: function(response){ $("#a1").html(response); }})

</html>
</head>
<body>
</body>
</html>

Hello World Ajax - JQuery - V 2
<p>Ola mundo</p>
$.get("ajax_test.htm",
function (response) { $("#a1").html(response); })

</html>
</head>
<body>
</body>
</html>

Enviando dados para o servidor
Calculadora no servidor
<?php
$n1 = $_REQUEST['n1'];
echo $n1+$n2;
?>

Enviando dados para o servidor
<?php
echo $n1+$n2;
?>
$(function () {
$("#button").click ( function () {
$.get("calc.php", {n1: $("#n1").val(), n2: $("#n2").val() },
function (response) {
$("#res").html(response);
})
})
});

Recebendo dados do servidor: JSON
<?php
$res = array (
'res' => $n1+$n2,
);
$output = json_encode($res);
echo $output;
$.getJSON("calc_json.php", {n1: $("#n1").val(), n2: $("#n2").val() },
$("#res").html(response.res)
})
})
});

Recebendo e enviando: JSON
<?php
$data = json_decode ($_REQUEST['data'], true);
$res = array (
'res' => $data['n1'] + $data['n2']
);
$output = json_encode($res);
echo $output
?>
$.getJSON("calc_json2.php",
{data: JSON.stringify ({n1:$("#n1").val(), n2:$("#n2").val() }) },
$("#res").html(response.res)
})
})

É só isso ?
YES. Agora é JavaScript e
criatividade.

É só isso ?
YES. Agora é JavaScript e
criatividade.

No final da aula de PHP, tem
outro exemplo de ajax com o
php.

Introdução ao JQuery e AJAX

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Introdução ao JQuery e AJAX

Similar a Introdução ao JQuery e AJAX (20)

Más de Sérgio Souza Costa

Más de Sérgio Souza Costa (20)

Introdução ao JQuery e AJAX