Portal
Bom, com certeza umas das coisas que eu mais odeio é o iFrame. Mas e quando precisamos carregar uma página dentro da outra sem recarregar? Bom, aí você vai ter duas opções, que é o iFrame from hell, e o Ajax.
Neste tutorial vou usar o Prototype, pois to tentando largar o JQuery, e ela é uma framework tão boa quanto.
Agora chega de conversar, é hora de trabalhar! (Rimou >_>)
Para começarmos, crie um novo arquivo (avá) html (index.html) com o esqueleto básico e uma div#main. Linke o prototype (avá) e adicione a seguimente Js:
Adicione um link com o formato <a href=#'teste.html\', {});'>Texto</a>, crie um outro arquivo (teste.html) e coloque qualquer coisa nele.
Provavelmente seu index.html vai estar assim:
Com os dois arquivos no jeito, é só clicar no link e voilà, tudo nos conformes =)
Agora vamos tratar de outros dois galhos dessa árvore: formulários &amp; PHP.
O PHP é simples, tu muda teste.html pra teste .php. Para usar <em>query string </em>é basicamente colocar as variáveis dentro do parâmetro <em>params.</em>
Ex.:
Já nos formulários, eu fiz uma função pra isso
Uso:
Bom, o tutorial ficou bem simples, fiz ele aproveitando que um amigo tinha pedido, mas mesmo assim espero que gostem.
Não vai ter como eu upar demo porque eu perdi a senha do FTP do meu blog, então.. Fica pra próxima :)
Até logo mafagafos!
Neste tutorial vou usar o Prototype, pois to tentando largar o JQuery, e ela é uma framework tão boa quanto.
Agora chega de conversar, é hora de trabalhar! (Rimou >_>)
Para começarmos, crie um novo arquivo (avá) html (index.html) com o esqueleto básico e uma div#main. Linke o prototype (avá) e adicione a seguimente Js:
| Código pr0x by Raphael |
| function load(address, params){ // Address=Arquivo; Params=Parâmetros GET/POST new Ajax.Request(address, { // Instancia uma nova requisição Ajax encoding: 'windows-1252', // Define a encoding (charset) da requisição method: 'POST', // Método - GET ou POST (vide formulários) parameters: params, // Parâmetros adicionais a serem enviados pelo método definido em .method onSuccess: function(transport) { // Caso esteja tudo Ok $('main').innerHTML = transport.responseText // Define o conteúdo com a resposta } }) }; |
Adicione um link com o formato <a href=#'teste.html\', {});'>Texto</a>, crie um outro arquivo (teste.html) e coloque qualquer coisa nele.
Provavelmente seu index.html vai estar assim:
- Código:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Esqueleto HTML</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function load(address, params){
new Ajax.Request(address, {
encoding: 'windows-1252',
method: 'POST',
parameters: params,
onSuccess: function(transport) {
$('main').innerHTML = transport.responseText
}
})
}
</script>
</head>
<body>
<a href="#" onclick="load('teste.txt', {});">Carregar</a>
<div id="main">
Antes de Carregar
</div>
</body>
</html>
Com os dois arquivos no jeito, é só clicar no link e voilà, tudo nos conformes =)
Agora vamos tratar de outros dois galhos dessa árvore: formulários &amp; PHP.
O PHP é simples, tu muda teste.html pra teste .php. Para usar <em>query string </em>é basicamente colocar as variáveis dentro do parâmetro <em>params.</em>
Ex.:
- Código:
<!--- Antes: -->
<a href="home.php?action=sexshop&item=1046&submit">Carregar</a>
<!--- Depois: -->
<a onclick="load('home.php', {action: 'sexshop', item: 1046, submit: ''});" href="#">Carregar</a>
<!--- Ou ainda: -->
<a onclick="load('loader.php', {page: 'home.php', action: 'sexshop', item: 1046, submit: ''});" href="#">Carregar</a>
Já nos formulários, eu fiz uma função pra isso
- Código:
function frmSubmit(form, action){
fields=$(form).serialize().toQueryParams()
load(action, fields)
}
Uso:
- Código:
<form action="#" onsubmit="frmSubmit(this, 'sexshop.php'); return false;">
.....
</form>
Bom, o tutorial ficou bem simples, fiz ele aproveitando que um amigo tinha pedido, mas mesmo assim espero que gostem.
Não vai ter como eu upar demo porque eu perdi a senha do FTP do meu blog, então.. Fica pra próxima :)
Até logo mafagafos!
Última edição por Raphael C. em Sáb Jan 28, 2012 8:41 pm, editado 9 vez(es)
