Você está aqui: jQuery ::: Dicas & Truques ::: AJAX

Apostila jQuery para iniciantes - Como fazer requisições assíncronas usando o método ajax() do jQuery

Quantidade de visualizações: 17597 vezes
O jQuery fornece formas bem simples de se fazer requisições assíncronas usando AJAX. Uma destas formas é o método ajax(). Este método possui quase uma dezena de parâmetros adicionais e retorna um objeto XMLHttpRequest, que pode ser usado para fins de encadeamento ou cancelamento da requisição HTTP.

Enquanto outras dicas cobrem todos os parâmetros deste método, aqui nos concentraremos apenas em escrever um exemplo completo de seu uso. Trata-se de uma aplicação que fará uma solicitação HTTP POST a um código PHP que retornará um arquivo XML com alguns valores.

Vamos começar analisando o codigo PHP:

<?
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Content-Type: text/xml");

$nome = utf8_decode($_POST["nome"]);
$cidade = utf8_decode($_POST["cidade"]);
$estado = utf8_decode($_POST["estado"]);

echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n";
echo "<pessoas>\n";
echo "  <pessoa>\n";
echo "    <nome>" . $nome . "</nome>\n";
echo "    <cidade>" . $cidade . "</cidade>\n";
echo "    <estado>" . $estado . "</estado>\n";
echo "  </pessoa>\n";
echo "</pessoas>";
?>

Salve este código PHP como pesquisa.php. Tudo que ele faz é receber alguns parâmetros POST e usá-los para montar um arquivo XML. Em um determinado momento, o arquivo XML retornado poderá ser algo como:

<?xml version="1.0" encoding="iso-8859-1"?>
<pessoas>
 <pessoa>
  <nome>OSMAR J. SILVA</nome>
  <cidade>GOIÂNIA</cidade>
  <estado>GO</estado>
 </pessoa>
</pessoas>

Fique de olho na estrutura deste arquivo XML enquanto progredimos. Veja agora uma página HTML completa que mostra como usar o método ajax() para se conectar a este código PHP e obter os dados gerados em forma de XML:

<html>
<head><title>Estudos jQuery</title>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1">

<!-- Importa a biblioteca jQuery -->
<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
  function carregarDados(){
    var dados = {'nome': "Osmar J. Silva",
	         'cidade': "Goiânia",
		 'estado': "GO"}
	
    $.ajax({
      url: 'pesquisar.php',
      type: 'post',
      dataType: 'xml',
      data: dados,
      success: function(data){
        $(data).find('pessoa').each(function(){
          var nome = $(this).find('nome').text();
	  var cidade = $(this).find('cidade').text();
	  var estado = $(this).find('estado').text();
	  $("#parag").html("Nome: " + nome + "<br>");
	  $("#parag").append("Cidade: " + cidade + "<br>");
	  $("#parag").append("Estado: " + estado);
	});	
      },
      error: function(XMLHttpRequest, textStatus, 
                      errorThrown){
        window.alert('Houve um erro!');
      }
    });
  }
</script>

</head>
<body>

<button onclick="carregarDados()">Carregar dados
</button>

<p id="parag"></p>

</body>
</html>

Veja como usamos os métodos find() e each() para acessar e percorrer os elementos XML. Estes métodos são encontrados na seção de métodos para percorrer o HTML DOM e o XML DOM. Para finalizar lembre-se de que o método ajax() retorna um objeto XMLHttpRequest.


jQuery ::: Dicas & Truques ::: Atributos ou Propriedades HTML

Como obter o valor da propriedade class CSS de um elemento HTML usando jQuery

Quantidade de visualizações: 9849 vezes
Em algumas situações nós precisamos obter o valor da propriedade class de um elemento HTML. O trecho de código abaixo mostra como isso pode ser feito usando a função attr() da biblioteca jQuery:

<script type="text/javascript">
<!--
  function obterNomeClasse(){
    // Este exemplo mostra como obter o nome de classe
    // de um elemento HTML com o id "div_1"
    var nomeClasse = $('#div_1').attr("className");
    window.alert(nomeClasse);
  }
//-->
</script>



jQuery ::: Dicas & Truques ::: Atributos ou Propriedades HTML

Apostila jQuery - Como verificar se um elemento HTML pertence a uma determinada classe usando a função hasClass() do jQuery

Quantidade de visualizações: 12708 vezes
Muitas vezes precisamos saber se um elemento HTML pertence a uma determinada classe CSS. Isso pode ser feito com o auxílio do método hasClass() da biblioteca jQuery. Basta passarmos a classe CSS que queremos verificar. Veja como usá-lo no trecho de código abaixo:

<script type="text/javascript">
<!--
  function pertenceClass(){
    // testa se o parágrafo com o id "parag"
    // pertence à classe "destaque"
    if($('#parag').hasClass("destaque"))
      window.alert("Pertence à classe destaque");
    else
      window.alert("NÃO pertence à classe destaque");
  }
//-->
</script>

O retorno deste método é um valor boolean (true ou false).


jQuery ::: Dicas & Truques ::: Manipulação e Conteúdo Dinâmico

jQuery para iniciantes - Como obter valores de elementos de formulários HTML usando a função val() do jQuery

Quantidade de visualizações: 6953 vezes
Nesta dica eu mostro como podemos usar o método val() da biblioteca jQuery para obter o conteúdo dos elementos de formulários HTML.

Veja, por exemplo, como obter o conteúdo de uma caixa de texto com o id "nome":

<script type="text/javascript">
<!--
  function obterTexto(){
    var texto = $('#nome').val();
    window.alert(texto);
  }
//-->
</script>

Lembre-se de que este método atuará apenas no primeiro da possível série de elementos retornados sob uma determinada condição.

O retorno val() do jQuery é uma string.


jQuery ::: Dicas & Truques ::: Atributos ou Propriedades HTML

Como obter valores dos atributos de um elemento HTML usando a função attr() do jQuery

Quantidade de visualizações: 13990 vezes
O exemplo abaixo mostra como obter os valores dos atributos de um elemento HTML usando a notação attr(). O retorno é uma string contendo o valor do atributo:

<script type="text/javascript">
<!--
  function obterAtributo(){
    // Este exemplo mostra como obter o valor do 
    // atributo value de uma caixa de texto com 
    // o id "nome"
	
    var valor = $('#nome').attr("value");
    window.alert(valor);
  }
//-->
</script>



jQuery ::: Dicas & Truques ::: Atributos ou Propriedades HTML

Como remover uma classe (ou classes) de um elemento HTML usando a função removeClass() do jQuery

Quantidade de visualizações: 9616 vezes
Muitas vezes precisamos remover uma ou mais classes de um elemento HTML. Para isso nós podemos usar o método removeClass() da biblioteca jQuery. Veja como isso pode ser feito no trecho de código abaixo:

<script type="text/javascript">
<!--
  function removerClass(){
    // remove a classe "destaque" do parágrafo
    // com o id "parag"
    $('#parag').removeClass("destaque");
  }
//-->
</script>

Se quisermos remover mais de uma classe ao mesmo tempo, basta separá-las por espaços no argumento para o método.

O retorno deste método é um objeto jQuery que pode ser usado para fins de encadeamento de chamadas de métodos.


Veja mais Dicas e truques de jQuery

Dicas e truques de outras linguagens

Quem Somos

Osmar J. Silva
WhatsApp +55 (062) 98553-6711

Goiânia-GO
Full Stack Developer, Professional Java Developer, PHP, C/C++, Python Programmer, wxWidgets Professional C++ Programmer, Freelance Programmer. Formado em Ciência da Computação pela UNIP (Universidade Paulista Campus Goiânia) e cursando Engenharia Elétrica pela PUC-Goiás. Possuo conhecimentos avançados de Java, Python, JavaScript, C, C++, PHP, C#, VB.NET, Delphi, Android, Perl, e várias tecnologias que envolvem o desenvolvimento web, desktop, front-end e back-end. Atuo há mais de 15 anos como programador freelancer, atendendo clientes no Brasil, Portugal, Argentina e vários outros paises.
Entre em contato comigo para, juntos, vermos em que posso contribuir para resolver ou agilizar o desenvolvimento de seus códigos.
José de Angelis
WhatsApp +55 (062) 98243-1195

Goiânia-GO
Formado em Sistemas de Informação pela Faculdade Delta, Pós graduado em Engenharia de Software (PUC MINAS), Pós graduado Marketing Digital (IGTI) com ênfase em Growth Hacking. Mais de 15 anos de experiência em programação Web. Marketing Digital focado em desempenho, desenvolvimento de estratégia competitiva, analise de concorrência, SEO, webvitals, e Adwords, Métricas de retorno. Especialista Google Certificado desde 2011 Possui domínio nas linguagens PHP, C#, JavaScript, MySQL e frameworks Laravel, jQuery, flutter. Atualmente aluno de mestrado em Ciência da Computação (UFG)
Não basta ter um site. É necessário ter um site que é localizado e converte usuários em clientes. Se sua página não faz isso, Fale comigo e vamos fazer uma analise e conseguir resultados mais satisfatórios..

Linguagens Mais Populares

1º lugar: Java
2º lugar: C#
3º lugar: PHP
4º lugar: Delphi
5º lugar: Python
6º lugar: JavaScript
7º lugar: C
8º lugar: C++
9º lugar: VB.NET
10º lugar: JSP (Java Server Pages)



© 2021 Arquivo de Códigos - Todos os direitos reservados | Versión en Español | Versão em Português