AJAX :: Carregando Paginas e Enviando Forms

[SkyWalker.TO 0]

Olá!..

 

 

estava procurando uma solução para envio de forms no google e ele me trouxe até aqui no forum.

encontrei uma solução do fabyo e aprimorei ela para o envio de forms!..

 

::ATENÇÃO :: este codigo envia o form com metodo GET!!.. porem oculta a URL do historico !!

 

você pode utilizar este codigo para enviar qualquer formulario sem nenhuma modificação!

 

usei como base os seguintes artigos:

 

http://forum.imasters.com.br/index.php?showtopic=163371

http://www.tableless.com.br/artigos/ajaxdemo2/

 

Este codigo permite você carregar varios conteudos em varios pontos da pagina simultaneamente, pois ele utiliza uma fila!

 

segue abaixo o codigo.

 

// cria a filafila=[];ifila=0;// funcao que carrega uma pagina dentro de um objeto qualquerfunction carrega(url, destino){	// coloca o texto "carregando" no objeto de carregamento	document.getElementById(destino).innerHTML="Carregando";	// adiciona o item na fila	fila[fila.length]=[url,destino];		// se a fila estiver vazia, inicia a execução	if((ifila+1)==fila.length)ajaxRun();}//Executa a próxima conexão da filafunction ajaxRun(){	// carrega os dados da pagina da fila	url		= fila[ifila][0];	destino	= fila[ifila][1];			// carrega a pagina	xmlhttp.open("GET", url, true);		// headers	xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");	xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");	xmlhttp.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");	xmlhttp.setRequestHeader("Pragma", "no-cache");	// ao completar o carregamento	xmlhttp.onreadystatechange=function() {		if (xmlhttp.readyState==4){			// coloca o valor no objeto requisitado			texto=unescape(xmlhttp.responseText.replace(/\+/g," "));			document.getElementById(destino).innerHTML=texto;			// executa a proxima requisição da lista (se existir)			ifila++;			if(ifila<fila.length)setTimeout("ajaxRun()",20);		}	}		// executa	xmlhttp.send(url);}// função que le todos os campos de um form e envia!function enviaForm(frmNome, url, destino){	// Captura o form	f = document.getElementById(frmNome);	// inicializa nova URL	var query=url;	//Percorre elementos do formulario	for (i=0;i<f.elements.length;i++){		// se for a primeira variavel adiciona o "?" senao adiciona "&"		query += i==0 ? '?' : '&';		// concatena a variavel na query		query += f.elements[i].name + '=' + f.elements[i].value;	}	// envia o formulario	carrega(query, destino);}

vamos ao form!

 

<div id="login">		  <table width="100%" border="0" cellpadding="1" cellspacing="0" id="tbllogin">			<form name="frmLogin" id="frmLogin" method="post" action="acoes.php">			<tr>			  <td align="center" bgcolor="#FFAA00">.:LOGIN:.</td>			</tr>			<tr>			  <td align="left">Matricula:</td>			</tr>			<tr>			  <td align="center"><input name="matricula" type="text" class="larg100" /></td>			</tr>			<tr>			  <td align="left">Senha:</td>			</tr>			<tr>			  <td align="center"><input name="senha" type="text" class="larg100" /></td>			</tr>			<tr>			  <td align="center"><input name="Submit" type="button" onclick="enviaForm('frmLogin', 'acoes.php', 'login');" class="larg100bot" value="Entrar" /></td>			</tr>			</form>		  </table>		  </div>

Flw!.. espero que seja util ^^

[jabba 0]

pq não funciona qd dentro de outro ajax ?

[nvGullit 0]

kra, colca um anexo com um exemplo ja pronto costuma ser melhor pra estudar.pq assim agente comete menos erro na hora de copiar o código pra testar.

[Angelo Alberto 0]

Pessoal vou postar uma função Ajax bem simples e que me ajudou bastante, todos sabemos que há 2 formas de requisição de conteúdo através do ajax, de forma síncrona e de forma assíncrona, e sabemos também que é mais 'confortável' utilizarmos da segunda forma citada, pois não trava o browser, não nos deixa dependente dã resposta de uma solicitação e etc, mas quando desenvolvemos nos deparamos com vários problemas, dentre estes problemas vou citar um: Precisei fazer com que carrega-se informações de um usuário cadastrado, beleza, e dentre os dados do usuário vem o CEP da sua localidade, optei por carregar os outros dados de localidade(PAIS, ESTADO E MUNICIPIO) através deste CEP, mas o que aconteceu foi que hora ele carregava tudo certinho e hora dava problema, pois acontecia de o municipio ser carregado primeiro do que o estado, no projeto existem 3 combos, PAIS, ESTADO E MUNICIPIO e cada um deles vai obedecendo uma hierarquia para ser carregado, ex: carrega-se um usuário com o CEP: 40080000, a função pega o CEP e chama 3 solicitações assíncrona para carregar o PAIS, o ESTADO com base no PAIS e o MUNICIPIO com base no ESTADO, então o erro ocorria frequentemente, pensei então em uma forma em que cada um fosse carregado porém obedcendo uma ordem, veio então a idéia de implementar uma fila de solicitações assíncronas, eis que irei postar aqui para quem estiver precisando. A função makeRequestFILA recebe 2 vetores, o primeiro de URLs e o segundo de DIVs, ex: carrega primeiro a url[0] e solta o conteudo no div[0] até o tamanho do vetor(length), desta forma como a makeRequestFILA é chamada de forma recursiva somente quando o request.status estiver 200, ou seja completo as solicitações obedeceram uma ordem.

 

Abaixo coloquei logo toda a página sem separar .js:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>Untitled Document</title>

</head>

 

<body>

<div id="ajax1">1</div>

<div id="ajax2">2</div>

<div id="ajax3">3</div>

 

<label>

<input onclick="req();" type="button" name="Button" value="Button" />

</label>

</body>

</html>

<script>

 

function req()

{

var soli = new Array(3);

//alert(soli.length);

soli[0] = 'paginaCarregada1.html';

soli[1] = 'paginaCarregada2.html';

soli[2] = 'paginaCarregada3.html';

 

 

var div = new Array(3);

div[0]="ajax1";

div[1]="ajax2";

div[2]="ajax3";

 

makeRequestFILA(soli, div);

}

 

var i=0;

function makeRequestFILA(url,div) {

 

http_request = false;

//alert(url);

 

 

 

if (window.XMLHttpRequest) { // Mozilla, Safari,...

http_request = new XMLHttpRequest();

if (http_request.overrideMimeType) {

http_request.overrideMimeType('text/xml');

// See note below about this line

}

} else if (window.ActiveXObject) { // IE

try {

http_request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

http_request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

}

 

if (!http_request) {

alert('Giving up :( Cannot create an XMLHTTP instance');

return false;

}

http_request.onreadystatechange = alertContents;

 

var d = new Date();

d = d.getTime();

 

http_request.open('GET', url + '?time='+d+'&iddiv='+div, true);

http_request.send(null);

 

function alertContents() {

 

if (http_request.readyState == 4) {

if (http_request.status == 200) {

//alert(div);

try { document.getElementById(div).innerHTML = (http_request.responseText); } catch(e) {}

 

if(i<url.length-1)

{

i++;

makeRequestFILA(url, div);

}

else

{

i=0;

}

} else {

alert('There was a problem with the request.');

}

}

 

}

 

}

 

 

try { window.onload = inicia(); } catch(e) {}

 

function inicia()

{

req();

}

 

</script>

[Carlos Schmitz 0]

segue aí o modelo completo do script.. nosso amigo tinha esquecido de dar início ao XMLHttpRequest...

 

arquivo do form:

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Ajax Form Send</title><script type="text/javascript">try{	xmlhttp = new XMLHttpRequest();}catch(ee){	try{		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");	}catch(e){		try{			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");		}catch(E){			xmlhttp = false;		}	}}fila=[];ifila=0;function carrega(url, destino){	document.getElementById(destino).innerHTML="Carregando";	fila[fila.length]=[url,destino];	if((ifila+1)==fila.length)ajaxRun();}function ajaxRun(){	url        = fila[ifila][0];	destino    = fila[ifila][1];	xmlhttp.open("GET", url, true);	xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");	xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");	xmlhttp.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");	xmlhttp.setRequestHeader("Pragma", "no-cache");	xmlhttp.onreadystatechange=function() {		if (xmlhttp.readyState==4){			texto=unescape(xmlhttp.responseText.replace(/\+/g," "));			document.getElementById(destino).innerHTML=texto;			ifila++;			if(ifila<fila.length)setTimeout("ajaxRun()",20);		}	}	xmlhttp.send(url);}function enviaForm(frmNome, url, destino){	f = document.getElementById(frmNome);	var query=url;	for (i=0;i<f.elements.length;i++){		query += i==0 ? '?' : '&';		query += f.elements[i].name + '=' + f.elements[i].value;	}	carrega(query, destino);}</script></head><body><div id="login">	<form name="frmLogin" id="frmLogin" method="post" action="resultado.php">		<label>Login: </label><input name="login" type="text"/><br />		<label>Senha: </label><input name="senha" type="text"/><br />		<input name="Submit" type="button" onclick="enviaForm('frmLogin', 'resultado.php', 'login');" value="Entrar" />	</form></div></body></html>

Arquivo resultado.php

<?phpecho("Login: ".$_GET['login']."<br>");echo("Senha: ".$_GET['senha']."<br>");?>

não posso esquecer de agradecer pelo script.... tava um bom tempo procurando algo mais prático para enviar forms... sempre tinha que definir quais eram os campos do form....

[Carlos Schmitz 0]

uma pequena mudança no código Ajax...adaptei a parte de status do meu script antigo de Ajax para que em caso de erro seje exibido o status.segue código abaixo:<pre class="_prettyXprint _lang-

[Nilson Chagas 0]

Ao fazer esta linha query += f.elements.name + '=' + f.elements.value;

 

Ao indicar f.elements.value, você não tem problemas com caracteres especiais como #, + e aspas???

 

Eu tive, o que pode estar errado??

 

[]s

Nilson

[tayson 0]

tem com enviar arquivos por este form?me refiro a campos input do tipo "file"valew =)