Introdução ao JQuery e AJAX

Introdução ao JQuery e AJAXProf: Sérgio Souza Costa

Write Less

DO MORE

http://newhiteboard.com/wp-content/uploads/2013/12/jquery-logo.png

Sobre mim

Sérgio Souza CostaProfessor - UFMADoutor em Computação Aplicada (INPE)

[email protected]

https://sites.google.com/site/profsergiocosta/home

https://twitter.com/profsergiocosta

http://gplus.to/sergiosouzacosta

http://www.slideshare.net/skosta/presentations?order=popular









"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 ?

O que é JQuery ?

HTML/ BrowserJavaScript

O que é JQuery ?

HTML/ BrowserJavaScript DOM/

BOM

O que é JQuery ?


BOMJQuery

O que é JQuery ?


BOMJQuery

Independente de browser

O que é JQuery ?


BOMJQuery

Independente de browser

JQuery é uma biblioteca JavaScript, ou seja, um conjunto de 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

http://jquery.com/

Como usar ?



ou diretamente:

http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

http://jquery.com/



Como usar ?



ou diretamente:


ou baixem o hello_jquery.rar, no site

http://jquery.com/



Como usar ?



ou diretamente:


ou baixem o hello_jquery.rarO "min" significa que este arquivo foi "minificado", ou seja, eliminado todos os espaçamentos, tabs ...

http://jquery.com/



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" >$(document).ready( function(){ $ ("body").html ("<p>Ola Mundo !!</p>")

})</script></head><body></body></html>

equivalente ao window.onload

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" >$(document).ready( function(){ $ ("body").html ("<p>Ola Mundo !!</p>")



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

Hello World - 2 - Atalho "document ready"<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" >

$( function(){ $ ("body").html ("<p>Ola Mundo !!</p>")

})

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


Hello World - 3 - Sem "innerHtml"

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" >$(document).ready(function(){ $ ("<p/>", {

text: "Ola Mundo !!"}).appendTo("body")


1. Cria a tag <p>2. Atribui a ela o texto3. Adiciona a "body"

Hello World - 3 - Sem "innerHtml"

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" >$(document).ready(function(){ $ ("<p/>", {

text: "Ola Mundo !!"}).appendTo("body")


1. Cria a tag <p>2. Atribui a ela o texto3. Adiciona a "body"

Matado a ansiedade, vamos entender melhor isso ...

Para quê ?

Para quê ?

Produtividade = Poucas linhas de códigos

Para quê ?

Produtividade = Poucas linhas de códigos

Cross browser

Para quê ?

Produtividade – Poucas linhas de códigos

Cross browser

DOM

Para quê ?


Cross browser

DOM CSS

Para quê ?


Cross browser

DOMCSS

AJAX

Para quê ?


Cross browserDOM

CSS

AJAX

PLUGINS

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





Funções anônimas





Funções anônimas

Closures

“Thank God for closures!”. John Resig

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

http://marcgrabanski.com/presentations/jquery-essentials.pdf

http://marcgrabanski.com/presentations/jquery-essentials.pdf

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

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


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

1. Selecionava todos <div>2. Para cada um3. Mudava o estilo, css


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

Filosofia JQuery

Filosofia JQuery

#1. PROCURE algo no HTML

Filosofia JQuery

#1. PROCURE algo no HTML

#2. FAÇA algo com ele

PROCURE

$("div")

PROCURE

$("div") Procurando elementos...

Use o seletor $()

Use o seletor $()

$(“#myId”)

Use o seletor $()

$(“#myId”) $(“.myClass”)

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”)

Seleção com composição:

Procure

$(“div”)

Procure

$(“div”).hide()

Faça

Vamos ver ....

teste_jquery_1.html

Encadeamento

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!');

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

Formatando

Salvando seleções

var $divs = $('div');

Salvando seleções

var $divs = $('div');$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


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

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

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





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






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






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

Oculte o primeiro item das listas do arquivo teste_jquery_1.html

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 mesmonome do método usado para obter um valor

Getters & Setters

O jQuery “sobrecarrega” seus métodos, então o método usado para setar um valor geralmente tem o mesmonome do método usado para obter um valor.

O método $.fn.html usado como setter$('h1').html('olá mundo');

Getters & Setters

O jQuery “sobrecarrega” seus métodos, então o método usado para setar um valor geralmente tem o mesmonome 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étodosMovendoappend(), appendTo(), before(), after(),

Atributoscss(), attr(), html(), val(), addClass()

Eventosbind(), trigger(), unbind(), live(), click()

Travessiafind(), is(), prevAll(), next(), hasClass()

Efeitosshow(), fadeOut(), toggle(), animate()

Ajaxget(), getJSON(), post(), ajax(), load()

Método $()

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


$(“#foo”).append(“<p>test</p>”);

<html><body><div>jQuery</div> <div id=”foo”>example</div></body></html>

Movendo elementos


$(“#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><div id=”foo”>example</div></body></html>

Movendo elementos


$(“p”).appendTo(“#foo”);


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”)


Copiando elementos


$(“p”).clone()


Copiando elementos


$(“p”).clone().appendTo(“#foo”);


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

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

Atributos

Get

.attr(‘id’)

Atributos

Get

.attr(‘id’)

.html()

Atributos

Get

.attr(‘id’)

.html()

.css(“fontSize”)

Atributos

Get

.attr(‘id’)

.html()


.width()

Set

.attr(‘id’, ‘foo’)

Atributos

Get

.attr(‘id’)

.html()


.width()

Set


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

Atributos

Get

.attr(‘id’)

.html()


.width()

Set



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

Atributos

Get

.attr(‘id’)

.html()


.width()

Set




.width(60)

Atributos

Get

.attr(‘id’)

.html()


.width()

Set




.width(60)

Largura do primeiro elemento

Atributos

Get

.attr(‘id’)

.html()


.width()

Set




.width(60)

Largura do primeiro elemento

Largura de todos elemento

Atributos

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.

Atributos


$(...).html(“<p>I’m new</p>”);




Pega o valor.$(...).val();

Eventos

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

$.each

Remove espaços em branco à esquerda e à direita.

$.trim(" muitos espaços em branco extras ");// returns "muitos espaços em branco extras"

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

JQuery Parte 2













Travessia

Travessia

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

Travessia


$('h1').prevAll();$('h1').next('p');$('div:visible').parent();$('input[name=first_name]').closest('form');$('#myList').children();$('li.selected').siblings();$('h1').find('p');

Travessia


$('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 id=”myCell”></td><td></td></tr></table></body>

Travessia


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

Travessia



Travessia


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

Travessia


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

Travessia



Travessia


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

Travessia


$(“table”);<html><body><table><tr><td></td><td></td><td id=”myCell”></td><td></td></tr></table></body>

Travessia


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

Efeitos/Animação

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("slow"); ou $(...).hide(5000);

Efeitos/Animação

Hide e show


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

$(...).show() $(...).show("slow") $(...).show(500);

Efeitos/Animação

Para cada click, slide up / slide down um elemento

$(...).click(function(){ $(...).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.

Extendendo JQuery

Plugins

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

Plugins

$.fn.OlaMundo = function(){return this.each(function(){ $(this).html("Plugin Ola Mundo");});}

$(“div”)<html><body><div></div><div></div></body></html>

Plugins

$.fn.OlaMundo = function(){return this.each(function(){ $(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:

AJAX

Modelo classico

AJAX

O que é Ajax ?

Assyncronous

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+, SafarixmlHttp=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+, SafarixmlHttp=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()

Muito Complicado ?

Ajax no JQuery

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


$.ajax({ url: "ajax_test.htm", success: function(response){ $("#a1").html(response); }})

<p>Ola mundo</p>


Hello World Ajax - JQuery - V 2


$.get("ajax_test.htm", function (response) { $("#a1").html(response); })

<p>Ola mundo</p>


Enviando dados para o servidor

Calculadora no servidor

<?php $n1 = $_REQUEST['n1']; $n2 = $_REQUEST['n2']; echo $n1+$n2;?>

Enviando dados para o servidor

Calculadora no servidor

<?php $n1 = $_REQUEST['n1']; $n2 = $_REQUEST['n2']; 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: JSONCalculadora no servidor

<?php$n1 = $_REQUEST['n1'];$n2 = $_REQUEST['n2'];$res = array ( 'res' => $n1+$n2,);$output = json_encode($res);echo $output;

$("#button").click ( function () {$.getJSON("calc_json.php", {n1: $("#n1").val(), n2: $("#n2").val() }, function (response) { $("#res").html(response.res) })})});

Recebendo e enviando: JSONCalculadora no servidor<?php$data = json_decode ($_REQUEST['data'], true);$res = array ( 'res' => $data['n1'] + $data['n2']);$output = json_encode($res);echo $output ?>

$("#button").click ( function () {$.getJSON("calc_json2.php", {data: JSON.stringify ({n1:$("#n1").val(), n2:$("#n2").val() }) }, function (response) {$("#res").html(response.res)})})

É só isso ?

É 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.

https://sites.google.com/site/skosta/teaching/2012/sit150/aulas/server_side

Documents

Introdução ao JQuery e AJAX