{"id":2234,"date":"2012-03-12T20:01:33","date_gmt":"2012-03-12T20:01:33","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=2234"},"modified":"2019-05-20T09:41:54","modified_gmt":"2019-05-20T09:41:54","slug":"cargar-contenido-sin-recargar-la-pagina","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/","title":{"rendered":"Cargar contenido sin recargar la p\u00e1gina"},"content":{"rendered":"

Para mejorar la usabilidad de una p\u00e1gina Web en muchas ocasiones puede ser una gran ventaja utilizar jQuery<\/strong> para cargar contenido sin recargar la p\u00e1gina<\/strong>.<\/p>\n

La informaci\u00f3n que aparece en la cabecera, pie de p\u00e1gina y columnas en la mayor\u00eda de casos siempre suele ser la misma y quiz\u00e1 puede resultar interesante mantenerlas ah\u00ed de forma est\u00e1tica mientras el usuario navega y cargar el contenido en una \u00fanica parte de la p\u00e1gina que podemos denominar como din\u00e1mica.<\/p>\n

En el ejemplo que queremos ilustrar en este tutorial vamos a tener una cabecera fija, un men\u00fa fijo y un pie de p\u00e1gina fijo. La parte central del contenido ser\u00e1 la que cambiar\u00e1 seg\u00fan el usuario va pulsando en los elementos del men\u00fa.<\/p>\n

Conseguir este efecto se puede hacer de diversas formas. En este tutorial vamos a ver como hacerlo con la funci\u00f3n load()<\/strong> que tiene disponible jQuery<\/strong>.<\/p>\n

En primer lugar tenemos que agregar en la cabecera o dentro de la etiqueta <head> la librer\u00eda\u00a0jQuery<\/strong>\u00a0y el script que captura el evento:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<script src="https:\/\/code.jquery.com\/jquery-3.2.1.js"><\/script>\n<<\/span>script type=<\/span>"text\/javascript"<\/span>><\/span>\n$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n    $(<\/span>'#div-btn1'<\/span>)<\/span>.on<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n        $(<\/span>"#central"<\/span>)<\/span>.load<\/span>(<\/span>'inc\/presentation.php'<\/span>)<\/span>;<\/span>\n        return<\/span> false<\/span>;<\/span>\n    }<\/span>)<\/span>;<\/span>\n    ...\n}<\/span>)<\/span>;<\/span>\n<\/<\/span>script><\/span><\/pre><\/div><\/div>\n
Si nos fijamos, a parte de incluir la librer\u00eda jQuery<\/strong>, estamos agregando un c\u00f3digo que captura el evento de hacer click en el bot\u00f3n o enlace con identificador \u00abdiv-btn1\u00bb. Al hacer click en este elemento,\u00a0 tan solo rellenamos el contenido con identificador \u00abcentral\u00bb con el contenido que tenga el archivo pasado como par\u00e1metro en la funci\u00f3n load()<\/strong>.<\/p>\n
Esta funci\u00f3n nos permite cargar los datos del servidor y colocar el HTML<\/strong> devuelto en el elemento coincidente consiguiendo el objetivo de este tutorial: cargar contenido sin recargar la p\u00e1gina<\/strong>.<\/p>\n
En el siguiente enlace puedes ver una documentaci\u00f3n completa de la funci\u00f3n load()<\/strong>. Ver m\u00e1s informaci\u00f3n<\/a>.<\/p>\n
El elemento que hace de enlace o ejecuta el evento es tan simple como lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<a<\/span><\/a> class<\/span>=<\/span>"nav-link"<\/span> id<\/span>=<\/span>"div-btn1"<\/span> href<\/span>=<\/span>"#"<\/span>><\/span>Presentation<\/<\/span>a<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Lo puedes depositar en cualquier parte de tu documento HTML<\/strong>. En el caso del ejemplo hemos creado un men\u00fa utilizando Bootstrap<\/strong>.<\/p>\n
El archivo prestentation.php<\/em> que se est\u00e1 haciendo referencia en este tutorial tan solo tiene un poco de c\u00f3digo HTML<\/strong> pero podr\u00eda tener cualquier informaci\u00f3n que se puede sacar de una base de datos, de una archivo o de donde te puedas imaginar.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n
Esta entrada ha sido actualizada el 06\/08\/2018.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Para mejorar la usabilidad de una p\u00e1gina Web en muchas ocasiones puede ser una gran ventaja utilizar jQuery para cargar contenido sin recargar la p\u00e1gina. La informaci\u00f3n que aparece en la cabecera, pie de p\u00e1gina y columnas en la mayor\u00eda de casos siempre suele ser la misma y quiz\u00e1 puede resultar interesante mantenerlas ah\u00ed de […]<\/p>\n","protected":false},"author":1,"featured_media":7309,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,5,3],"tags":[74],"class_list":["post-2234","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-jquery","category-php","tag-contenedores"],"yoast_head":"\nCargar contenido sin recargar la p\u00e1gina - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Tutorial y c\u00f3digo de ejemplo donde te explicamos como cargar contenido sin recargar la p\u00e1gina utilizando la funci\u00f3n load() de jQuery.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cargar contenido sin recargar la p\u00e1gina - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Tutorial y c\u00f3digo de ejemplo donde te explicamos como cargar contenido sin recargar la p\u00e1gina utilizando la funci\u00f3n load() de jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-12T20:01:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-05-20T09:41:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/cargar-contenido-sin-recargar-la-pagina.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/\",\"name\":\"Cargar contenido sin recargar la p\u00e1gina - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/cargar-contenido-sin-recargar-la-pagina.png\",\"datePublished\":\"2012-03-12T20:01:33+00:00\",\"dateModified\":\"2019-05-20T09:41:54+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Tutorial y c\u00f3digo de ejemplo donde te explicamos como cargar contenido sin recargar la p\u00e1gina utilizando la funci\u00f3n load() de jQuery.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/cargar-contenido-sin-recargar-la-pagina.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/cargar-contenido-sin-recargar-la-pagina.png\",\"width\":1000,\"height\":1000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cargar contenido sin recargar la p\u00e1gina\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cargar contenido sin recargar la p\u00e1gina - Jose Aguilar Blog","description":"Tutorial y c\u00f3digo de ejemplo donde te explicamos como cargar contenido sin recargar la p\u00e1gina utilizando la funci\u00f3n load() de jQuery.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Cargar contenido sin recargar la p\u00e1gina - Jose Aguilar Blog","og_description":"Tutorial y c\u00f3digo de ejemplo donde te explicamos como cargar contenido sin recargar la p\u00e1gina utilizando la funci\u00f3n load() de jQuery.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-03-12T20:01:33+00:00","article_modified_time":"2019-05-20T09:41:54+00:00","og_image":[{"width":1000,"height":1000,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/cargar-contenido-sin-recargar-la-pagina.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/","url":"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/","name":"Cargar contenido sin recargar la p\u00e1gina - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/cargar-contenido-sin-recargar-la-pagina.png","datePublished":"2012-03-12T20:01:33+00:00","dateModified":"2019-05-20T09:41:54+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Tutorial y c\u00f3digo de ejemplo donde te explicamos como cargar contenido sin recargar la p\u00e1gina utilizando la funci\u00f3n load() de jQuery.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/cargar-contenido-sin-recargar-la-pagina.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/cargar-contenido-sin-recargar-la-pagina.png","width":1000,"height":1000},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/cargar-contenido-sin-recargar-la-pagina\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cargar contenido sin recargar la p\u00e1gina"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=2234"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2234\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7309"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=2234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=2234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=2234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}