sábado, 25 de junio de 2011

JQUERY. Uso de función .load()

Información tomada de:


Load data from the server and place the returned HTML into the matched element.

Ejemplo:

PRIMER ARCHIVO: uno.html



<html>
<head>
   <title>Ajax Simple</title>
    <script src="jquery-1.6.min.js" type="text/javascript"></script>   
<script>
$(document).ready(function(){
   $("#enlaceajax").click(function(evento){
      evento.preventDefault();
      $("#destino").load("contenido-ajax.html");
    });

    $("#enlaceajaxdatos").click(function(evento){
        evento.preventDefault();
        var nombres = $("#caja_nombre").val();
        var apellidos = $("#caja_apellido").val();
        var cedula = $("#caja_cedula").val();

        $("#destino").load("recibe-parametros.php", {cedula: cedula ,nombres: nombres, apellidos: apellidos}, function(){
            //alert("recibidos los datos por ajax");
        });
    });
})
</script>
</head>
<body>
    <h3>Mi primer prueba de Ajax con Javascript</h3>

    <div>
        Cedula: <input type="text" id="caja_cedula" name="fcedula" /><br />
        Nombres: <input type="text" id="caja_nombre" name="fname" /><br />
        Apellidos: <input type="text" id="caja_apellido" name="lname" /><br />
    </div>
    
    <div>
        [<a href="#" id="enlaceajax">Haz clic!</a>]
        [<a href="#" id="enlaceajaxdatos">Haz clic con parametros!</a>]
    </div>
<br>
<div id="destino"></div>

</body>
</html>


SEGUNDO ARCHIVO: 
contenido-ajax.html

<h2>
LLevando algo...

Contenido que debe mostrarse en la pagina solicitada
</h2>




TERCER ARCHIVO: recibe-parametros.php

Recibido los datos desde el html:
<br>
Nombre: <?php echo $_POST["nombres"];?>
<br>
Apellidos: <?php echo $_POST["apellidos"];?>
<br>
Cedula: <?php echo $_POST["cedula"];?>



0 comentarios:

Publicar un comentario

Con la tecnología de Blogger.

Follow by Email

Lema

El mejor hábito.... la lectura..

Buscar

BTemplates.com

BTemplates.com

Blogroll

Blogroll

About