{"id":146,"date":"2014-02-22T00:12:01","date_gmt":"2014-02-22T00:14:19","guid":{"rendered":"https:\/\/84acfjs.jpg"},"modified":"2015-07-28T15:13:19","modified_gmt":"2015-07-28T21:13:19","slug":"jquery-load-cargar-un-html-externo-en-un-div-sin-recargar-la-pagina","status":"publish","type":"post","link":"https:\/\/emanuelpaxtian.com\/blog\/jquery-load-cargar-un-html-externo-en-un-div-sin-recargar-la-pagina\/","title":{"rendered":"jQuery load(): cargar un html externo en un div sin recargar la pagina"},"content":{"rendered":"

En muchas ocasiones deseamos recargar parte de una pagina sin recargar todo el contenido para ello podemos hacer uso de Jquery.<\/p>\n

Con jQuery load() podemos cargar en un determinado div un archivo externo (php, html, asp\u2026) en el momento que necesitemos o bajo petici\u00f3n del usuario mediante formularios, botones, enlaces\u2026<\/p>\n

<html>\r\n    <head>\r\n        <title>jQuery Load<\/title>\r\n        <!-- Libreria jQuery -->\r\n        <script type='text\/javascript' src="\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js"><\/script>\r\n\r\n        <!-- Acci\u00f3n sobre el bot\u00f3 con id=boton y actualizamos el div con id=capa -->\r\n        <script type="text\/javascript">\r\n            $(document).ready(function() {\r\n                $("#boton").click(function(event) {\r\n                    $("#capa").load('paginaacargar.php #contenido');\r\n                });\r\n            });\r\n        <\/script>\r\n    <\/head>\r\n    <body>\r\n    <div id="capa">Pulsa 'Actualizar capa' y este texto se actualizar\u00e1<\/div>\r\n    <br>\r\n       <input name="boton" id="boton" type="button" value="Actualizar capa" \/>\r\n    <\/body>\r\n<\/html>\r\n<\/pre>\n
Primera demo de ejemplo del script.<\/strong><\/p>\n
    \n
  1. L\u00ednea 5: referenciamos la libreria jQuery.<\/li>\n
  2. Script l\u00ednea 8: Tal y como comento en el c\u00f3digo, cuando se clicke el bot\u00f3n con id=boton cargaremos el archivo \u2018\/demos\/03-jquery-load01.php\u2019 en el div con id=capa.<\/li>\n
  3. L\u00ednea 17: Div que actualizaremos con el nuevo contenido, cuyo id=capa.<\/li>\n
  4. L\u00ednea 19: Bot\u00f3n con id=boton que ser\u00e1 el ejecutor del script.<\/li>\n
  5. El archivo externo \u2018paginaacargar.php\u2019 contiene el texto \u2018TEXTO ACTUALIZADO!!!!\u2019.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    En muchas ocasiones deseamos recargar parte de una pagina sin recargar todo el contenido para ello podemos hacer uso de Jquery. Con jQuery load() podemos cargar en un determinado div…<\/p>\n","protected":false},"author":1,"featured_media":478,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-146","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php"],"_links":{"self":[{"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/posts\/146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/comments?post=146"}],"version-history":[{"count":0,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/posts\/146\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/media\/478"}],"wp:attachment":[{"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/media?parent=146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/categories?post=146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emanuelpaxtian.com\/blog\/wp-json\/wp\/v2\/tags?post=146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}