Código PHP:
<!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=utf-8" />
<title>Cargando contenido dinámico con la función ajax de jQuery</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#boton_cargar').click(function() {
$.ajax({
url: 'www.google.com',
success: function(data) {
$('#div_dinamico').html(data);
}
});
});
$('#boton_cargar_anim').click(function() {
$.ajax({
url: 'contenido_anim.html',
success: function(data) {
$('#div_dinamico_anim').html(data);
$('#div_dinamico_anim div').slideDown(1000);
}
});
});
});
</script>
<style type="text/css">
.html, body {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
.div_dinamico {
float:left;
width:100%;
padding:0px;
margin:0px;
min-height:20px;
border:1px solid #999;
}
.div_dinamico_anim {
float:left;
width:100%;
padding:0px;
margin:0px;
min-height:20px;
border:1px solid #999;
}
.espacio20 {
height:20px;
clear:both;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div class="ejemplo">
Cargando contenido dinámico con la función ajax() de jQuery
<br /><br />
<input name="boton_cargar" id="boton_cargar" type="button" value="Cargar contenido" />
<br /><br />
<div name="div_dinamico" id="div_dinamico" class="div_dinamico"></div>
<div class="espacio20"></div>
Cargando contenido dinámico con la función ajax() de jQuery, con una pequeña animación con slideDown()
<br /><br />
<input name="boton_cargar_anim" id="boton_cargar_anim" type="button" value="Cargar contenido" />
<br /><br />
<div name="div_dinamico_anim" id="div_dinamico_anim" class="div_dinamico_anim"></div>
</div>
</body>
</html>