- http://api.jquery.com/load
- http://www.desarrolloweb.com/articulos/uso-ajax-jquery.html
- http://www.webintenta.com/Ajax-con-jQuery-el-metodo-load.html
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