Foros del Web » Programando para Internet » Javascript » Frameworks JS »

mostrar resultados de consulta sin recargar página

 Estas en el tema de mostrar resultados de consulta sin recargar página en el foro de Frameworks JS en Foros del Web. 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> ...
  #1 (permalink)  
Antiguo 19/03/2007, 15:36
Avatar de ZydRick  
Fecha de Ingreso: febrero-2005
Ubicación: Lima
Mensajes: 750
Antigüedad: 19 años, 9 meses
Puntos: 4
mostrar resultados de consulta sin recargar página
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
  #2 (permalink)  
Antiguo 20/03/2007, 11:20
Avatar de franleomg  
Fecha de Ingreso: mayo-2006
Ubicación: LIMA PERU
Mensajes: 75
Antigüedad: 18 años, 6 meses
Puntos: 0
Exclamación Re: mostrar resultados de consulta sin recargar página
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>
__________________
:: FRANLEOMG ::
Melgarejo Graciano M. Efraín
[email protected]
  #3 (permalink)  
Antiguo 20/03/2007, 16:00
 
Fecha de Ingreso: diciembre-2004
Mensajes: 37
Antigüedad: 19 años, 10 meses
Puntos: 0
Re: mostrar resultados de consulta sin recargar página
te complicas menos enviando el formulario a un iframe!!.

y te funciona mejor!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 04:01.