jqueryResumindo a função desse método: Ele carrega uma determinada página HTML e injeta o conteúdo dela dentro de um elemento DOM, o que é DOM?

Document Object Model (DOM) ou Modelo de Objeto Documental em português, é uma plataforma de interface e linguagem neutra que permite que programas e scripts acessar e atualizar dinamicamente o conteúdo, estrutura e estilo de documentos. DOM define um caminho padronizado para acessar e manipular elementos HTML.

htmltreeEste é um exemplo de hierarquia sobre os elementos HTML.
Imagem retirada do w3school.

Agora voltando ao foco, você já entendeu que com o método .load() podemos carregar qualquer conteúdo de outra página dentro de qualquer elemento HTML, essa é a principal característica do Ajax, vamos a sintaxe:

load( url, [data], [callback] )
  • URL -> A url da página HTML à ser carregada
  • [data] -> Dados a serem enviados ao servidor, usando POST.
  • [callback] -> Com esse parâmetro, você pode pegar os dados de retorno e tratá-los como quiser.

Exemplo 1:

$('#conteudo').load("dados.html");

Aqui simplesmente carregamos o conteúdo da página ‘dados.html‘ para dentro do elemento que tem a ID ‘conteudo‘.

Exemplo 2:

$('#conteudo').load("dados.html #cont2 li");

Neste outro caso, especificamos que queremos somente o conteúdo da TAG ‘<li>‘ que se encontra dentro da DIV id=’cont2′.

Exemplo 3:

$('#conteudo').load("dados.php?nome=AlexandreSantos");

Agora carregamos o conteúdo da página ‘dados.php‘ enviando pelo método GET a variável ‘nome‘ com o valor ‘AlexandreSantos‘.

Exemplo 4:

$('#conteudo').load("dados.php", {nome: "Alexandre Santos"});

Agora ao invés de usarmos o método GET para enviar valores para outra página usamos o POST, definindo os valores a serem enviados pelo segundo parâmetro.

Agora vamos por em prática, vocês podem ver um exemplo do resultado final aqui: http://diariodecodigos.info/exjqload/

index.php

<html>

<head>
<script language="javascript">
$(document).ready(function(){
	$('#botao').click(function(){
		$('#conteudo').load("dados.html #cont2 li");
	}); // FIM $('#botao').click();
}); // FIM $(document).ready();
</script>
</head>

<body>

<p> A Baixo temos uma DIV chamada Conteúdo da qual é o elemento que receberá o conteúdo HTML</p>
<p> <a href="#" id="botao">Clique Aqui</a></p>

<hr color="#0000FF" />

<div id='conteudo'>

</div>

</body>

dados.html

Esse é a outra página HTML da qual tem esse conteúdo!

<div id="cont2">
    conteúdo dentro da DIV 'cont2'

    <ul>
    	<li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
    </ul>
</div>

Posts Relacionados

Imprimir Post Imprimir Post