En esta ocasión os mostraré como cargar un documento html mediante ajax, para ello crearemos en primer lugar el archivo que será cargado ...
ajax.html ...
Ajax cargado correctamente.
A continuación empezaremos a trabajar con Jquery, para ello crearemos una nueva página e añadimos un botón con id='btn_ajax', al hacer click sobre el botón el contenido de ajax.html será cargado en un div con id='foo'. Para ejecutar este proceso haremos uso de la función ajax de Jquery.
index.html ...
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(function(){
$("#btn_ajax").on("click", function(){
$.ajax({
url:'ajax.html',
dataType: "html",
success: function(result) {
$("#foo").html(result);
}
});
});
});
</script>
</head>
<body>
<div data-role="page">
<center>
<div data-role="header">
<h1>Ajax Jquery Mobile</h1>
</div>
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal">
<input type="button" id="btn_ajax" data-role="button" data-icon="star" data-iconpos="left" data-theme="a" data-mini="true" value="Cargar Ajax">
</div>
<div id="foo"></div>
</div>
<div data-role="footer"><h1>PIE DE PÁGINA</h1></div>
</center>
</div>
</body>
</html>
Si todo ha sido correcto debéis ver una pantalla como la siguiente con el documento cargado ...
No hay comentarios:
Publicar un comentario