mostrar resultados de consulta sin recargar página

[ZydRick]

Hola amigos tengo el siguiente script hecho en PHP y MySQL:

Código PHP:

 <h4>Consulta de salidas</h4>
<form method="post" action="<?=$_SERVER['PHP_SELF']?>">
  <select name="ruta">
    <option value="0" disabled="disabled" selected="selected" style="width: 100px;">Seleccionar ruta</option>
    <option value="piuramancora">De Piura a Máncora</option>
    <option value="mancorapiura">De Máncora a Piura</option>
  </select> 
  <input type="submit" name="mostrar" value="Consultar" style="background: #2d2d2d; color: #fff;" />
</form><br />
<?php
    if($mostrar) {
        include('config.php');
        if($_POST['ruta'] == 'piuramancora') {
            $sql = mysql_query("SELECT * FROM piuramancora");
?>
    <h3>Recorrido de Piura a Máncora</h3>
    <table style="width: 100%;" cellpadding="0" cellspacing="0">
        <tr>
            <td class="cabeseras">Piura</td>
            <td class="cabeseras">Sullana</td>
            <td class="cabeseras">Talara</td>
            <td class="cabeseras">El Alto</td>
            <td class="cabeseras">&Oacute;rganos</td>
            <td class="cabeseras">M&aacute;ncora</td>
            <td class="cabeseras">Tipo</td>
        </tr>
<?php            
            while($row = mysql_fetch_array($sql)) {
                $piura = $row['piura'];
                $sullana = $row['sullana'];
                $talara = $row['talara'];
                $elalto = $row['elalto'];
                $organos = $row['organos'];
                $mancora = $row['mancora'];
                $tipo = $row['tipo'];
?>
        <tr>
            <td class="result"><?=$piura?></td>
            <td class="result"><?=$sullana?></td>
            <td class="result"><?=$talara?></td>
            <td class="result"><?=$elalto?></td>
            <td class="result"><?=$organos?></td>
            <td class="result"><?=$mancora?></td>
            <td class="result"><?=$tipo?></td>
        </tr>
<?php
            }
?>
        </table>
<?php
        }elseif($_POST['ruta'] == 'mancorapiura') {
            $sql2 = mysql_query("SELECT * FROM mancorapiura");
?>
    <h3>Recorrido de Máncora a Piura</h3>
    <table style="width: 100%;" cellpadding="0" cellspacing="0">
        <tr>
            <td class="cabeseras">M&aacute;ncora</td>
            <td class="cabeseras">&Oacute;rganos</td>
            <td class="cabeseras">El Alto</td>
            <td class="cabeseras">Talara</td>
            <td class="cabeseras">Sullana</td>
            <td class="cabeseras">Piura</td>
            <td class="cabeseras">Tipo</td>
        </tr>
<?php
            while($row2 = mysql_fetch_array($sql2)) {
                $piura2 = $row2['piura'];
                $sullana2 = $row2['sullana'];
                $talara2 = $row2['talara'];
                $elalto2 = $row2['elalto'];
                $organos2 = $row2['organos'];
                $mancora2 = $row2['mancora'];
                $tipo2 = $row2['tipo'];
?>
        <tr>
            <td class="result"><?=$mancora2?></td>
            <td class="result"><?=$organos2?></td>
            <td class="result"><?=$elalto2?></td>
            <td class="result"><?=$talara2?></td>
            <td class="result"><?=$sullana2?></td>
            <td class="result"><?=$piura2?></td>
            <td class="result"><?=$tipo2?></td>
        </tr>
<?php
            }
?>
    </table>
<?php
        }else {
            echo "<h4>No ha seleccionado ninguna ruta.</h4>";
        }
    }
?>   

Explico de que va, al ingresar a la página donde se encuentra dicho script me muestra el formulario con la lista desplegable para selecionar una ruta(recorrido de autobus) y al pulsar en consultar me muestra una tabla donde están los horarios de dicha ruta, todo ello funciona muy bien, pero hace que la página se recargue y lo que quisiera hacer es echar mano de AJAX para que al momento de realizar la consulta me muestre los datos pero sin que se recargue la página.

La verdad que yo de AJAX no sé mucho, espero que alguien me pueda echar una mano con esto, se lo agradeceré bastante.

Saludos

[franleomg]

Esto funciona, solo cambia algunas cosas, como funcions de mysql para q funcione tu db, espero abrte ayudado, Saludos

Código PHP:

  <? 
/**************************************************** FUNCIONES ************/ 
        function Llenar(){ 
            // GET POST es similar, si cambias a POST cambia en js tambien 
            if (empty($_GET['ruta'])){ 
                echo "no se seleciono dato"; 
                return false; 
            } 
             
            ?> 
                                        <h3>Recorrido de <?=$_GET['ruta']?></h3> 
                            <table style="width: 100%;" cellpadding="0" cellspacing="0"> 
                                <tr> 
                                    <td class="cabeseras">Piura</td> 
                                    <td class="cabeseras">Sullana</td> 
                                    <td class="cabeseras">Talara</td> 
                                    <td class="cabeseras">El Alto</td> 
                                    <td class="cabeseras">&Oacute;rganos</td> 
                                    <td class="cabeseras">M&aacute;ncora</td> 
                                    <td class="cabeseras">Tipo</td> 
                                </tr> 
                                <? 
                    if($_GET['ruta'] == 'piuramancora') { 
                                  //  $sql = mysql_query("SELECT * FROM piuramancora"); 
                        ?> 
 
                        <?php            $i=0; 
                                    while( $i<2/*$row = mysql_fetch_array($sql)*/) { 
                                    // el $i y " uno " son datos para mostrar ya que no hay db para hacer si funciona 
                                    $i++; 
                                        $piura = $row['piura']." uno "; 
                                        $sullana = $row['sullana']." uno "; 
                                        $talara = $row['talara']." uno "; 
                                        $elalto = $row['elalto']." uno "; 
                                        $organos = $row['organos']." uno "; 
                                        $mancora = $row['mancora']." uno "; 
                                        $tipo = $row['tipo']." uno "; 
                        ?> 
                                <tr> 
                                    <td class="result"><?=$piura.$i?></td> 
                                    <td class="result"><?=$sullana.$i?></td> 
                                    <td class="result"><?=$talara.$i?></td> 
                                    <td class="result"><?=$elalto.$i?></td> 
                                    <td class="result"><?=$organos.$i?></td> 
                                    <td class="result"><?=$mancora.$i?></td> 
                                    <td class="result"><?=$tipo.$i?></td> 
                                </tr> 
                        <?php 
                                    } 
                        ?> 
                                </table> 
                        <?php 
                                }else{ 
                                   // $sql2 = mysql_query("SELECT * FROM mancorapiura"); 
                        ?> 
                        <?php $i=0; 
                                    while($i<2 /*$row2 = mysql_fetch_array($sql2)*/) { 
                                    // el $i y " DOS " son datos para mostrar ya que no hay db para hacer si funciona 
                                    $i++; 
                                        $piura2 = $row2['piura']." DOS "; 
                                        $sullana2 = $row2['sullana']." DOS "; 
                                        $talara2 = $row2['talara']." DOS "; 
                                        $elalto2 = $row2['elalto']." DOS "; 
                                        $organos2 = $row2['organos']." DOS "; 
                                        $mancora2 = $row2['mancora']." DOS "; 
                                        $tipo2 = $row2['tipo']." DOS "; 
                        ?> 
                                <tr> 
                                    <td class="result"><?=$mancora2.$i?></td> 
                                    <td class="result"><?=$organos2.$i?></td> 
                                    <td class="result"><?=$elalto2.$i?></td> 
                                    <td class="result"><?=$talara2.$i?></td> 
                                    <td class="result"><?=$sullana.$i2?></td> 
                                    <td class="result"><?=$piura2.$i?></td> 
                                    <td class="result"><?=$tipo2.$i?></td> 
                                </tr> 
                        <?php 
                                    } 
                        ?> 
                             
        <? } 
                 
                ?> </table> <?  
 
        } 
    if ($_GET[ajax]){ 
        header("Content-type: text/html; charset=iso-8859-1"); 
        Llenar(); 
        exit(); 
    } 
?> 
<!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>AJSX - PHP </title> 
<script language="javascript" type="text/javascript" > 
function CreateAjax() { 
    try { 
        ajax = new ActiveXObject("Msxml2.XMLHTTP"); 
    }  
    catch (e) { 
        try { 
            ajax = new ActiveXObject("Microsoft.XMLHTTP"); 
        }  
        catch (E) {ajax= false;} 
    } 
    if (!ajax && typeof XMLHttpRequest!='undefined') { 
    ajax = new XMLHttpRequest();} 
    return ajax 
} 
getAjax=CreateAjax(); 
 
function MoscarConsulta(url){ 
    document.getElementById('Consultar').disabled=true; 
    url=url+"?ajax=on&ruta="+document.getElementById("ruta").value; 
    //get o post es similar puedes usar 
    //si cambias a post cambia en php tambien 
    getAjax.open("GET",url,true);  
    getAjax.onreadystatechange=function() { 
        if (getAjax.readyState==4)    { 
            dato=getAjax.responseText; 
                document.getElementById("ajaxhtml").innerHTML = dato;  
                document.getElementById('Consultar').disabled=false; 
        } 
    } 
    getAjax.send(null); 
         
} 
</script> 
</head> 
<body> 
 
<h4>Consulta de salidas</h4> 
<form method="post" action=""> 
  <select name="ruta"> 
    <option value="0" disabled="disabled" selected="selected" style="width: 100px;">Seleccionar ruta</option> 
    <option value="piuramancora">De Piura a Máncora</option> 
    <option value="mancorapiura">De Máncora a Piura</option> 
  </select>  
  <input name="Consultar" type="button" id="Consultar" style="background: #2d2d2d; color: #fff;" onClick="MoscarConsulta('<?=$_SERVER['PHP_SELF']?>');" value="Consultar" /> 
</form><br /> 
<div id="ajaxhtml" ></div> 
</body> 
</html>  

[coverapido]

te complicas menos enviando el formulario a un iframe!!.

y te funciona mejor!!