Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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 ^^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.
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">](http://www.w3.org/1999/xhtml%22)
<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>
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">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....
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-
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
tem com enviar arquivos por este form?me refiro a campos input do tipo "file"valew =)
pq não funciona qd dentro de outro ajax ?