Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

snstro

Recarregar pagina via Ajax

Recommended Posts

Boa tarde pessoal. Sou novo aqui no forum e estou precisando da ajuda de voces.

 

Bem, o meu problema é o seguinte. Estou fazendo um trabalho na faculdade em que tenho que desenvolver um sistema em PHP. Só que pra nao ficar aquela coisa chata, de ter que carregar pagina tudo denovo a cada clique, eu resolvi usar um pouco do Ajax básico que aprendi. Até aí tudo bem, consegui fazer com que, ao clicar em determinado link do menu, a pagina referente a esse menu seja carregada numa div chamada "conteudo".

 

O problema todo, é que quando essa pagina que vai ser chamada dentro dessa div, é uma pagina de inserçao de dados, eu nao consigo fazer com que o cadastro seja realizado, exiba uma mensagem e recarregue essa pagina sem sair desta DIV.

 

Quem nao entendeu, vou explicar melhor...

 

Aqui esta o desenho de como vai ser o sistema:

Imagem Postada

 

Eu quero carregar dentro desta div, uma pagina que ira fazer um cadastro no banco, irá exibir a mensagem se cadastrou ou nao e irá retornar para a mesma pagina de cadastro. Isso tudo dentro dessa DIV.

 

Se alguem puder me ajudar, está a os codigos fontes:

 

Pagina teste.php

<?php
echo '<script language="javascript" src="includes/ajax.js"></script>';
$con = mysql_connect("localhost","root","") or die("Nao foi possivel conectar com o banco!");
mysql_select_db("teste", $con) or die("Nao foi possivel selecionar o banco!");

$op = $_GET['op'];

if(isset($op) && $op == 'cadastrar') {
	$nome = $_POST['nome'];
	$email = $_POST['email'];
	$telefone = $_POST['telefone'];
	$comentario = $_POST['comentario'];
	
	$sql = "INSERT INTO 
				contato (nome, email, telefone, comentario) 
				VALUES ('$nome', '$email', '$telefone', '$comentario')";
				
	$retorno = mysql_query($sql, $con);
	
	if($retorno) {
	echo "<script language='javascript'>
	alert('cadastrado');
	ExecAjax('teste.php', 'conteudo');
		  </script>";
	
	} else {
		echo "<script language='javascript'>
		alert('ERRO');
		ExecAjax('teste.php', 'conteudo');
			  </script>";
	}

} else {
?>

<!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=utf-8" />
<title>Untitled Document</title>
<style>
	@import url("estilo.css");
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="teste.php?op=cadastrar">
<table width="1016" border="0">
  <tr>
    <th width="143" scope="col"><div align="right"><strong>Nome:</strong></div></th>
    <th width="863" scope="col"><div align="left">
      <label>
      <input type="text" name="nome" id="nome" class="campo" />
      </label>
    </div></th>
  </tr>
  <tr>
    <td><div align="right"><strong>Email:</strong></div></td>
    <td><div align="left">
      <input type="text" name="email" id="email" class="campo" />
</div></td>
  </tr>
  <tr>
    <td><div align="right"><strong>Telefone:</strong></div></td>
    <td><div align="left">
      <input type="text" name="telefone" id="telefone" class="campo" />
</div></td>
  </tr>
  <tr>
    <td><div align="right"><strong>Comentario:</strong></div></td>
    <td><div align="left">
      <input type="text" name="comentario" id="comentario" class="campo" />
</div></td>
  </tr>
  <tr>
    <td></td>
    <td><div align="left">
      <label>
      <input type="submit" name="button" id="button" value="Submit" class="campo" />
      </label>
    </div></td>
  </tr>
</table>
</form>
<p> </p>
</body>
</html>
<?php } ?>

Bliblioteca ajax.js

// Inicia o Ajax
			function openAjax()
			{
				var ajax;
				try	{ajax = new XMLHttpRequest();}	// XMLHttpRequest para Firefox, Safari, dentre outros.
				catch(ee)
				{
					try	{ajax = new ActiveXObject("Msxml2.XMLHTTP");}	// Para o IE 6.0 da MS
					catch(e)
					{
						try	{ajax = new ActiveXObject("Microsoft.XMLHTTP");}	// Para o IE da MS
						catch(E) {ajax = false;}
					}
				}
				return ajax;
			}

			function ExecAjax(url, objresult)
			{
				var exibeResultado = document.getElementById(objresult);
				var ajax = openAjax();	// Chama funcao que inicia o Ajax
					
				ajax.open("GET", url, true); // true indica que a execucao sera de forma assincrona
								
				ajax.onreadystatechange =

					function()
					{
						if(ajax.readyState == 1)
						{
							exibeResultado.innerHTML = "<img src='wait.gif'><br/>CARREGANDO";
						}
						if(ajax.readyState == 4)
						{
							// Quando estiver tudo pronto.
							if(ajax.status == 200)
							{
								var resultado = ajax.responseText;
								//resultado = unescape(resultado.replace(/\+/g," "));
								exibeResultado.innerHTML = resultado;
							}
							else
							{
								exibeResultado.innerHTML = "Ocorreram erros no processamento...";
							}
						}
					}

				ajax.send(null);	// Submete
			}

Só pra esclarecer, na funçao ExecAjax(pagina, div) o primeiro parametro é a apgina que será aberta e o segundo parametro é a DIV em que essa pagina será aberta.

 

Agradeço antecipadamente.

OBS: Nao reparem no modo de programar ou em possiveis erros, pois ainda sou estudante de programação.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.