Utilizando Ajax Com JQuery

O documento descreve como funciona o Ajax e como ele pode ser utilizado para atualizar partes de uma página sem recarregá-la completamente. Ele também apresenta um exemplo de uma lista de tarefas onde novas tarefas são inseridas via Ajax e exibidas sem recarregar a página.

Enviado por

Claudio Azevedo Passos

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

275 visualizações13 páginas

Utilizando Ajax Com JQuery

Enviado por

Claudio Azevedo Passos

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 13

Parte 2: Ajax

Linguagem de Programação III

Bianca Melo
Cláudio Passos
O que é Ajax?
• AJAX = Asynchronous JavaScript And XML
• Utiliza uma combinação de:
– Objeto XMLHttpRequest (embutido no browser –
para fazer requisição a um servidor)
– JavaScript e HTML DOM (Document Object
Model) – para mostrar os dados
• Aplicações AJAX podem usar XML, mas
comum utilizarem texto simples ou JSON
• O AJAX permite que as páginas da web sejam
atualizadas de forma assíncrona, trocando
dados com um servidor da Web nos
bastidores.
• Isso significa que é possível atualizar partes de
uma página da Web sem recarregar a página
inteira.
Utilização
• É necessário importar a biblioteca jQuery
Função $.ajax()
Parâmetros:
– type/method (GET ou POST)
– url: destino do request
– data: dado/s que serão enviados para a url
Evento:
– Success: função que será chamada para o Ajax
retornar dados
Utilização
• Esse método pode ser utilizado dentro de
qualquer função javascript
Exemplo: lista de tarefas
• Usuário insere tarefa em uma lista
• A tarefa é salva no BD
• A tarefa aparece na página
HTML
<form method="POST" name="enviotarefa"
id="enviotarefa" >
<input type="text" name="tarefa" id="tarefa">
<select name="categoria" id="categoria">
<?php
include "conectaBD.php";
selecionarCategoria();
?>
</select>
<button id="btnEnvio"
onclick="insereTarefa()">Enviar</button>
</form>

<ul id="listaPrincipal">
<script>listaTarefa();</script>
</ul>
PHP
Listar tarefas: arquivo mostraTarefa.php
<?php
include "conectaBD.php";
$conexao = conecta();
$consulta = "SELECT tarefa, categoria FROM tarefas
WHERE feita=0 ORDER BY cod_tarefa DESC";
$resultado = $conexao->query($consulta);
while($display = $resultado->fetch(PDO::FETCH_OBJ)){
echo "<li class='itemTarefa'>".
$display->tarefa."<br><span class='salvo'>Salvo
em:</span> ".$display->categoria."</li>";
}
?>
JavaScript
Listar tarefas
function listaTarefa() {
$.ajax ({
url:'mostraTarefa.php',
dataType: 'html',
success: function (result)
{
$('#listaPrincipal').html(result);
}

});
}
PHP
Inserir tarefas: arquivo insereTarefa.php
<?php

$tarefa=$_POST["tarefa"];
$categoria=$_POST["categoria"];

include "conectaBD.php";
$conexao = conecta();
$insercao = $conexao->prepare("INSERT INTO
tarefas(tarefa, categoria, feita) VALUES(?,?,0)");
$insercao->bindParam(1, $tarefa);
$insercao->bindParam(2, $categoria);
$insercao->execute();

?>
JavaScript
Inserir tarefas
function insereTarefa(){
var formData = new
FormData(document.getElementById('enviotarefa'));
$.ajax({
url: "insereTarefa.php",
type: "POST",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(data) {
$('#enviotarefa').each(function() {
$(this).val('');});
listaTarefa();
}}); }
Exercício: acréscimo de
funcionalidades
• Cadastro de categorias semelhante ao
cadastro de tarefas
• Marcação de tarefas como concluídas
• Exclusão de categorias