Scribd Logo
Carica

Benvenuto in Scribd!

  • Insertar Datos Sin Recargar Pagina

    Caricato da

    Hector Triana
    90 visualizzazioni6 pagine

    Titolo originale

    insertar datos sin recargar pagina.docx

    Copyright

    © © All Rights Reserved

    Formati disponibili

    DOCX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    90 visualizzazioni6 pagine

    Insertar Datos Sin Recargar Pagina

    Caricato da

    Hector Triana

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 6

    INSERTAR DATOS EN MYSQL CON PHP USANDO

    AJAX PARA EVITAR RECARGAR LA PGINA


    Un gran inconveniente a la hora de insertar datos en una pgina web, es tener que volver a cargar la pgina completa para ver los resultados,
    algo que podemos evitar usando Ajax.
    Para conseguirlo, Ajax recoger los datos de nuestro formulario de insercin a la base de datos y los enviar a otra pgina PHP que se
    encarga de realizar la insercin. En esta entrada veremos cmo insertar datos en MySQL con PHP y AJAX.
    De esta forma, la pgina web no necesita recargarse para mostrar los datos insertados, ni siquiera para insertarlos simplemente.
    En el ejemplo de demostracin usar una base de datos con la siguiente estructura de tablas.

    CREATE TABLE IF NOT EXISTS `empleados` (


    `nombre` VARCHAR(255) NOT NULL,
    `apellido` VARCHAR(255) NOT NULL,
    `web` VARCHAR(255) NOT NULL
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
    El ejemplo, tratar de mostrar una lista con empleados y sus datos, y un formulario de alta de empleados. Al final del ejercicio quedar as.
    El ejemplo consta de 4 archivos.
    empleados_registro.php: Muestra el formulario de insercin y llama a la funcin en Ajax.
    ajax.js: Realiza la recogida de datos del formulario y lo enva al script en PHP.
    registro.php: Recoge los datos de la funcin en Ajax y llama a la consulta de los datos.
    consulta.php: Realiza una consulta en la base de datos despus de insertar los datos, este script se muestra en empleados_registro.php.
    Una vez explicada la estructura y funciones de cada archivo, veremos el cdigo de cada archivo. El cdigo es bastante sencillo y
    viene comentado para explicar todas las funciones.
    empleados_registro.php

    <html>
    <head>
    <title>Registro de empleados</title>
    <script language="JavaScript" type="text/javascript" src="ajax.js"></script>
    </head>
    <body>
    <form name="nuevo_empleado" action="" onsubmit="enviarDatosEmpleado(); return false">
    <h2>Nuevo empleado</h2>
    <table>
    <tr>
    <td>Nombres</td><td><label><input name="nombre" type="text" /></label></td>
    </tr>
    <tr>
    <td>Apellido</td><td><label><input type="text"
    name="apellido"></label></td>
    </tr>
    <tr>
    <td>Web</td><td><label><input name="web" type="text" /></label></td>
    </tr>
    <tr>
    <td>&nbsp;</td><td><label><input type="submit" name="Submit" value="Grabar"
    /></label></td>
    </tr>
    </table>
    </form>

    <div id="resultado"><?php include('consulta.php');?></div>

    </body>
    </html>

    ajax.js
    // JavaScript Document

    // Funcin para recoger los datos de PHP segn el navegador, se usa siempre.
    function objetoAjax(){
    var xmlhttp=false;
    try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {

    try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
    xmlhttp = false;
    }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
    }

    //Funcin para recoger los datos del formulario y enviarlos por post
    function enviarDatosEmpleado(){

    //div donde se mostrar lo resultados


    divResultado = document.getElementById('resultado');
    //recogemos los valores de los inputs
    nom=document.nuevo_empleado.nombre.value;
    ape=document.nuevo_empleado.apellido.value;
    web=document.nuevo_empleado.web.value;

    //instanciamos el objetoAjax
    ajax=objetoAjax();

    //uso del medotod POST


    //archivo que realizar la operacion
    //registro.php
    ajax.open("POST", "registro.php",true);
    //cuando el objeto XMLHttpRequest cambia de estado, la funcin se inicia
    ajax.onreadystatechange=function() {
    //la funcin responseText tiene todos los datos pedidos al servidor
    if (ajax.readyState==4) {
    //mostrar resultados en esta capa
    divResultado.innerHTML = ajax.responseText
    //llamar a funcion para limpiar los inputs
    LimpiarCampos();
    }
    }
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //enviando los valores a registro.php para que inserte los datos
    ajax.send("nombre="+nom+"&apellido="+ape+"&web="+web)
    }

    //funcin para limpiar los campos


    function LimpiarCampos(){
    document.nuevo_empleado.nombre.value="";
    document.nuevo_empleado.apellido.value="";
    document.nuevo_empleado.web.value="";
    document.nuevo_empleado.nombre.focus();
    }
    registro.php
    <?php

    //Configuracion de la conexion a base de datos


    $bd_host = "localhost";
    $bd_usuario = "root";
    $bd_password = "";
    $bd_base = "ajax";

    $con = mysql_connect($bd_host, $bd_usuario, $bd_password);


    mysql_select_db($bd_base, $con);

    //variables POST
    $nom=$_POST['nombre'];
    $ape=$_POST['apellido'];
    $web=$_POST['web'];

    //registra los datos del empleados


    $sql="INSERT INTO empleados (nombre, apellido, web) VALUES ('$nom', '$ape', '$web')";
    mysql_query($sql,$con) or die('Error. '.mysql_error());

    include('consulta.php');
    ?>
    consulta.php
    <?php

    //Configuracion de la conexion a base de datos


    $bd_host = "localhost";
    $bd_usuario = "root";
    $bd_password = "";
    $bd_base = "ajax";

    $con = mysql_connect($bd_host, $bd_usuario, $bd_password);


    mysql_select_db($bd_base, $con);
    //consulta todos los empleados
    $sql=mysql_query("SELECT * FROM empleados",$con);
    ?>
    <table style="color:#000099;width:400px;">
    <tr style="background:#9BB;">
    <td>Nombre</td>
    <td>Apellido</td>
    <td>Web</td>
    </tr>
    <?php
    while($row = mysql_fetch_array($sql)){
    echo "<tr>";
    echo "<td>".$row['nombre']."</td>";
    echo "<td>".$row['apellido']."</td>";
    echo "<td>".$row['web']."</td>";
    echo "</tr>";
    }
    ?>
    </table>

    Potrebbero piacerti anche