• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

wrproject

[PHP]Sistema de pesquiza sem botão de pesquiza utilizando ajax

4 mensagens neste tópico

ola pessoal, aqui esta um script em php para mostra o uso do ajax, bom para iniciantes, espero que gstem.

vamos comecar por criar o ficheiro responsavel de conectar a base dedados,o chamare-mos de conecta.php:

<?php
$con=mysql_connect("host","BD","password");//altere os parametros conforme o seu servidor
mysql_select_db("BD");//aqui selecciona base de dados
?>

comece por criar a tabela dos utilizadores, guarde-acom o nome tb_noticia.php:

<?php
include("conecta.php");
$sql="CREATE TABLE noticias
(
id int NOT NULL AUTO_INCREMENT,
PRIMARY KEY(ID),
autor varchar(100),
titulo varchar(100),
descrição varchar(100),
texto text
)";
mysql_query($sql,$con);
mysql_close($con);
?>

depois de criada a tabela, vamos criar o ficheiro de mandar os dados para o servidor, o chamaremos de index.php:

<html>
<head>
<script src="ajax.js"></script>
</head>
<body bgcolor="00FFFF">
<br>
<div align=center><b>EXEMPLO DO USO DO AJAX (ASYNCHRONOUS JAVASCRIPT AND XML)</b></div>
<form action="" method="post">
autor:<input type="text" name="autor"><br><br>
titulo:<input type="text" name="titulo"><br><br>
descrição:<input type="text" name="descri"><br><br>
texto:<input type="text" name="text"><br><br>
<input type="submit" name="submit" value="submeter formulᲩo">
<br><br>
<a href="index.php?accao=1">ver lista de noticias</a>
<a href="index.php?accao=2">pesquizar utilizando ajax</a>
<br>
</form>
</body>
</html> 
<?php
/*****************************************************************

AUTOR: ELISEU CARLOS CUGINGUILUA
DESCRIǃO: EXEMPLO DE CONSULTAS MYSQL
DATA DE CRIAǃO: 20 DE SETEMBRO DE 2007
*******************************************************************/
//inclusao do ficheiro conecta.php
include "conecta.php";
$accao=$_GET['accao'];

//condicao que verifica se a variavel accao tm valor 1
//se tiver as noticias sao listadas, se nao as noticias nao sao listadas
//esta a variavel e uma query string


if($accao==1)
{
$sql="select * from noticias order by id desc";
$result=mysql_query($sql);
echo "<a href=\"index.php?accao=0\">limpar resultados</a>"."<br>";
while($row=mysql_fetch_array($result)
){
echo "<b>ID noticia:</b>".$row['id']."<br>";
echo "<b>AUTOR</b>"." ".$row['autor']."<br>";
echo "<b>Titulo:</b>"." ".$row['titulo']."<br>";
echo "<b>Descricao:</b>"." ".$row['descrição']."<br>";
echo "<b>Texto:</b>"." ".$row['texto']."<br>"."<hr><br>";
}
}
if($accao==2)
{
echo "<form>
<input type=\"text\" width=95 onkeyup=\"mostra(this.value)\">
</form>
<p>
<br><div id=\"output\"><b>o output serᠡqui</b></div>
</p>";
}

//condicao que verifica se o botão submit foi premido, se sim os dados são enviados para o servidor


if(isset($_POST['submit']))
{
mysql_query("insert into noticias(autor,titulo,descrição,texto)
values('$_POST[autor]','$_POST[titulo]','$_POST[descri]','$_POST[text]')");
?>
<script>

//depois de inserida a noticia,e exibido um alerta para   avisar que a noticia foi enviada com sucesso
window.alert("um registo adicionado");
</script>
<?php
}
?>

agora crie o ficheiro javascript que vai ser responsavel para mandar o request para o servidor o chamare-mos de ajax.js:

var xmlHttp

function mostra(str)
{
if(str=="")
{
document.getElementById("output").innerHTML=xmlHttp.responseText 
} 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}

var url="ajax.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{
if(xmlHttp.readyState==1)
{
document.getElementById("output").innerHTML="<b>CARREGANDO DADOS...<b>"
}

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("output").innerHTML=xmlHttp.responseText 
}

}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}
return xmlHttp;
}

depoisde criadoo ficheiro, vamos criar o ficheiro responsavel de receber a query string, o chamare-mos de ajax.php, vai ser necessário, porque esta é a pagina que vai mostrar os dados:


<?php
include("conecta.php");
$q=$_GET["q"];
$sql="select * from noticias where autor like '%".$q."%'";
$result=mysql_query($sql);
echo "<table border='1'>
<tr>
<th>autor</th>
<th>titulo</th>
<th>descricao</th>
<th>texto</th>
</tr>";
while($row=mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>".$row['autor']."</td>";
echo "<td>".$row['titulo']."</td>";
echo "<td>".$row['descrição']."</td>";
echo "<td>".$row['texto']."</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>

bom, ja esta, teste no seu pc para ver se funciona,se quiserem ver istoa funcionar, aqui esta o  link: http://bitzero.freehostia.com/ajax

qualquer duvida mandem PM.

cUmps WRPROJECT. :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Está qui um bom tutorial de AJAX.

Pessoalmente prefiro usar um biblioteca que escreva o javascript por mim. Mas assim está muito bem explicdinho.

Mas o link que enviaste só tem um formulario de upload de ficheiros, não tem este script.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora