Este ejemplo muestra cómo cargar una página html estática en una etiqueta div usando JQuery Ajax.
Si desea cargar una página html estática, puede usar la función JQuery Ajax. Para separar esto del proyecto principal que tiene una buena estructura MVC, uso la función Ajax de JQuery para cargar esas páginas estáticas.
En primer lugar, aquí hay un menú de la página index.html.
<ul> <li><a id="page1" href="#">About</a></li> <li><a id="page2" href="#">Community</a></li> <li><a id="page3" href="#">Sponsor</a></li> </ul> <div id="result" style="clear:both;"> </div> |
En la parte principal, necesitamos incluir la biblioteca JQuery.
<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script> |
Agregue el siguiente código a la parte principal.
<script type="text/javascript"> $(document).ready(function(){ $("#page1").click(function(){ $('#result').load('pages/page1.html'); //alert("Thanks for visiting!"); }); $("#page2").click(function(){ $('#result').load('pages/page2.html'); //alert("Thanks for visiting!"); }); }); </script> |
¡Eso es!
Por supuesto, tiene un directorio / páginas / que contiene varias páginas html estáticas para cargar.
