Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Buscador en Tiempo Real Con AJAX

    Загружено:

    Jesus Rodriguez
    522 просмотров5 страниц
    Este documento describe la creación de un buscador en tiempo real utilizando AJAX, PHP y MySQL. Se crea una base de datos MySQL con una tabla de personas y archivos PHP para la conexión a la base de datos y el procesamiento de consultas. Un archivo JavaScript usa AJAX para enviar consultas a un archivo PHP a medida que el usuario escribe en un campo de texto, devolviendo y mostrando los resultados coincidentes.

    Исходное описание:

    asdasdasdsad

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    DOCX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    Este documento describe la creación de un buscador en tiempo real utilizando AJAX, PHP y MySQL. Se crea una base de datos MySQL con una tabla de personas y archivos PHP para la conexión a la base de datos y el procesamiento de consultas. Un archivo JavaScript usa AJAX para enviar consultas a un archivo PHP a medida que el usuario escribe en un campo de texto, devolviendo y mostrando los resultados coincidentes.

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    522 просмотров5 страниц

    Buscador en Tiempo Real Con AJAX

    Загружено:

    Jesus Rodriguez
    Este documento describe la creación de un buscador en tiempo real utilizando AJAX, PHP y MySQL. Se crea una base de datos MySQL con una tabla de personas y archivos PHP para la conexión a la base de datos y el procesamiento de consultas. Un archivo JavaScript usa AJAX para enviar consultas a un archivo PHP a medida que el usuario escribe en un campo de texto, devolviendo y mostrando los resultados coincidentes.

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 5

    Buscador en tiempo real con AJAX, PHP y MySQL

    Buscador realizado en HTML utilizando como lenguaje de programacin PHP,


    la tecnologa AJAX y a MySQL como motor de base de datos.

    Explicacin:

    Antes que todo, para el ejemplo utilizamos una base de datos llamada
    database que contiene una sla tabla llamada personas. sta tan slo tiene
    dos campos: cod y nombre.

    Tenemos el archivo conexion.php para conectarse a la base de datos:

    <?php

    function conexion(){

    $con = mysql_connect("localhost","root","");

    if (!$con){

    die('Could not connect: ' . mysql_error());


    }

    mysql_select_db("database", $con);

    return($con);

    ?>

    El archivo buscajax.php es la vista de nuestra aplicacion donde creamos


    nuestro cdigo html. En l incluimos la hojas de estilos y el cdigo
    javascript que contiene la funcion ajax. El mtodo onkeyup() ejecuta sta
    funcion.
    Archivo buscajax.php

    <!DOCTYPE html>
    <html>

    <head><title>Buscador</title>

    <script type="text/javascript" src="ajax.js"></script>


    <link rel="stylesheet" type="text/css" href="estilos.css" />

    </head>

    <body>

    <center>

    <h1><b>Buscador AJAX - PHP - MySQL</b></h1>

    Buscar <input type="text" id="bus" name="bus" onkeyup="loadXMLDoc()"


    required />

    <div id="myDiv"></div>

    </center>

    </body>

    </html>

    El archivo ajax.js es un archivo javascript que contiene una funcin


    llamada loadXMLDoc(), sta se activa cada vez que el usuario suelta una
    tecla del teclado.

    El objetivo de esta funcin es capturar las letras que se ingresen en la


    caja de texto, almacenarlas en una varibale llamado q y con el mtodo POST
    se procesen atravs del archivo proc.php.

    Archivo ajax.js
    function loadXMLDoc()
    {
    var xmlhttp;

    var n=document.getElementById('bus').value;

    if(n==''){
    document.getElementById("myDiv").innerHTML="";
    return;
    }

    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
    }
    xmlhttp.open("POST","proc.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlen
    coded");
    xmlhttp.send("q="+n);
    }

    El archivo proc.php contiene codigo php, lo que hace es capturar el valor


    que trae la variable q y utilizarla para hacer las consulta a la base de
    datos.

    Por ejemplo si el valor de q es J, hacemos una consulta a la base de datos


    para que arroje slo los nombres que empiezan con J y mostrar los
    resultados en el div con id: myDiv ubicado en el archivo buscajax.php.
    Archivo proc.php

    <?php

    include 'conexion.php';

    $q=$_POST[q];
    $con=conexion();

    $sql="select * from personas where nombre LIKE '".$q."%'";


    $res=mysql_query($sql,$con);

    if(mysql_num_rows($res)==0){

    echo '<b>No hay sugerencias</b>';

    }else{

    echo '<b>Sugerencias:</b><br />';

    while($fila=mysql_fetch_array($res)){

    echo $fila['nombre'].'<br />';

    ?>

    Por ultimo pero no menos importante el cdigo css para darle un poco de
    estilo a la pgina.

    Archivo estilos.css

    div
    {
    margin-top: 10px;
    border-style:dashed;
    width: 500px;
    height: 500px;
    background-color:#F0FFF0;
    text-align: left;
    color:#00008B;
    padding:10px 10px;
    }

    body{
    color:#696969;
    font-family:Arial,Helvetica,sans-serif;
    }

    Actualizacin (26/feb/2013)

    Actualizacin al buscador. Para obtener el cdigo completo y gratis de


    esta nueva versin, este es el link del repositorio en GitHub.

    Вам также может понравиться