{"id":9,"date":"2011-10-17T05:05:48","date_gmt":"2011-10-17T08:05:48","guid":{"rendered":"http:\/\/www.jeremiaspalazzesi.com.ar\/blog\/2011\/10\/17\/cargar-pagina-con-ajax\/"},"modified":"2016-02-05T16:32:32","modified_gmt":"2016-02-05T19:32:32","slug":"cargar-pagina-con-ajax","status":"publish","type":"post","link":"https:\/\/www.nerdadas.com\/blog\/cargar-pagina-con-ajax\/","title":{"rendered":"Cargar P\u00e1gina con Ajax!"},"content":{"rendered":"<figure id=\"attachment_11\" aria-describedby=\"caption-attachment-11\" style=\"width: 540px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.jeremiaspalazzesi.com.ar\/blog\/wp-content\/uploads\/2011\/10\/jquery.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-11\" title=\"Jquery\" src=\"http:\/\/www.jeremiaspalazzesi.com.ar\/blog\/wp-content\/uploads\/2011\/10\/jquery.png\" alt=\"Excelente Framework JavaScript\" width=\"540\" height=\"350\" srcset=\"https:\/\/www.nerdadas.com\/blog\/wp-content\/uploads\/2011\/10\/jquery.png 540w, https:\/\/www.nerdadas.com\/blog\/wp-content\/uploads\/2011\/10\/jquery-300x194.png 300w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/a><figcaption id=\"caption-attachment-11\" class=\"wp-caption-text\">Me salv\u00f3 la vida mil veces!<\/figcaption><\/figure>\n<p>Hoy ya es noticia vieja pero alguna vez dediqu\u00e9 tiempo y esfuerzo a aprender a programar JavaScript y ajax en ello. Fueron \u00e9pocas duras en las que ten\u00eda que armar toda la conexi\u00f3n a fuerza de pulm\u00f3n. Hasta que conoc\u00ed Jquery y mi vida cambi\u00f3. (Suspiros!)<\/p>\n<p>Lo primero que intent\u00e9 fue cargar toda p\u00e1gina en un mismo div(que inocencia en esa \u00e9poca) y luego lo empec\u00e9 a usar solo cuando lo necesitaba. A vos te va a resultar m\u00e1s f\u00e1cil porque ya tengo todo cocinado. El ejemplo:<\/p>\n<p>[pastacode lang=\u00bbjavascript\u00bb message=\u00bb\u00bb highlight=\u00bb\u00bb provider=\u00bbmanual\u00bb]<\/p>\n<pre><code>function cargarEnDiv(div){\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type:\"GET\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url:\"ejemplo.php\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success: function(datos){\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#'+div).html(datos);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n}<\/code><\/pre>\n<p>[\/pastacode]<\/p>\n<p>&nbsp;<\/p>\n<p>Con este ejemplo cargamos la p\u00e1gina \u00abejemplo.php\u00bb en el div que pongamos en la variable. Ac\u00e1 te defino el ejemplo completo:<\/p>\n<p>[pastacode lang=\u00bbmarkup\u00bb message=\u00bb\u00bb highlight=\u00bb\u00bb provider=\u00bbmanual\u00bb]<\/p>\n<pre><code>\r\n<html>\r\n\r\n<head>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<title>Prueba<\/title>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<script type=\"text\/javascript\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.3.2\/jquery.min.js\"><\/script>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<script type=\"text\/javascript\">\r\n\r\n\r\n\r\n\u00a0\u00a0\u00a0\u00a0function cargarEnDiv(div){\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: \"GET\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: \"1.html\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success: function(datos){\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#'+div).html(datos);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\r\n\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\r\n<\/head>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<body>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button onclick=\"cargarEnDiv('prueba');\">Cargar en div<\/button>\r\n\r\n\r\n<div id=\"prueba\"><\/div>\r\n\r\n\r\n\u00a0\u00a0\u00a0\u00a0<\/body>\r\n\r\n<\/html><\/code><\/pre>\n<p>[\/pastacode]<\/p>\n<p>&nbsp;<\/p>\n<p>Espero les sirva el tip. Cualquier duda consultan!.-<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hoy ya es noticia vieja pero alguna vez dediqu\u00e9 tiempo y esfuerzo a aprender a programar JavaScript y ajax en ello. Fueron \u00e9pocas duras en las que ten\u00eda que armar toda la conexi\u00f3n a fuerza de pulm\u00f3n. Hasta que conoc\u00ed Jquery y mi vida cambi\u00f3. (Suspiros!) Lo primero que intent\u00e9 fue cargar toda p\u00e1gina en [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":11,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,1],"tags":[6,9,12,5,10,4,7,11,8],"class_list":["post-9","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacion","category-sin-categoria","tag-cargar-en-div","tag-framework","tag-java","tag-javascript","tag-jeremias-palazzesi","tag-jquery","tag-obtener-pagina","tag-programacion-2","tag-sin-recargar"],"_links":{"self":[{"href":"https:\/\/www.nerdadas.com\/blog\/wp-json\/wp\/v2\/posts\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nerdadas.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nerdadas.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nerdadas.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nerdadas.com\/blog\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":5,"href":"https:\/\/www.nerdadas.com\/blog\/wp-json\/wp\/v2\/posts\/9\/revisions"}],"predecessor-version":[{"id":10,"href":"https:\/\/www.nerdadas.com\/blog\/wp-json\/wp\/v2\/posts\/9\/revisions\/10"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nerdadas.com\/blog\/wp-json\/wp\/v2\/media\/11"}],"wp:attachment":[{"href":"https:\/\/www.nerdadas.com\/blog\/wp-json\/wp\/v2\/media?parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nerdadas.com\/blog\/wp-json\/wp\/v2\/categories?post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nerdadas.com\/blog\/wp-json\/wp\/v2\/tags?post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}