1

Tal como digo en mi pregunta.

Lo que pasa es que mediante Ajax hago una llama a un document HTML, pero solo quiero obtener un cierto elemento digamos que solo el contenido del body.

Como puedo lograrlo?

Bueno lo que estoy intentando hacer, es implementar la navegación mediante la api ´History´ de javascript, y quiero obtener solo un contenido especifico y meterlo en un div especifico.

2
  • Lo que pasa es que mediante Ajax hago una llama a un document HTML... Es norma en esta comunidad indicar lo que has intentando y dónde te encuentras bloqueado. Al no poner nada nos obligas a inventar tu código para poder reproducir el problema. Y aunque lo inventemos, quizá no te funcione porque una posible respuesta podría contrastar con otros elementos...
    – A. Cedano
    Commented el 5 feb. 2018 a las 0:26
  • lo se pero no sabia como explicarlo con codigo xd Commented el 5 feb. 2018 a las 0:33

2 respuestas 2

2

Como no siempre tienes el control sobre los ids que pueda haber en otras páginas, quizá sea interesante para ti usar $.get.

Así, podrás trabajar con la respuesta. Puedes crear un DOM con la respuesta usando DOMParser y acceder al body mediante elementoDOM.body, o a cualquier elemento sin tener que depender de que éste tenga un id o algún selector.

Veamos una prueba, poniendo el body de la respuesta en el div cuyo id es resultado:

var url = 'https://www.w3.org/TR/xhtml1/';
$.get(url, function(data) {
  DOMparser = new DOMParser();
  DOMdata = DOMparser.parseFromString(data, 'text/html');
  var bodyHTML = DOMdata.body;

  /*En el caso de elementos como body deberás usar replace, para que no lo duplique*/

  //  $('body').replaceWith(bodyHTML);
  $('#resultado').html(bodyHTML);
  console.log(bodyHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="resultado"></div>

Ahora un ejemplo usando $.ajax:

/*Usando $.ajax*/
var url = 'https://developer.mozilla.org/es/docs/Web/HTML';
var request = $.ajax({
  url: url,
  method: "GET",
  dataType: "html"
});

request.done(function(data) {
  DOMparser = new DOMParser();
  DOMdata = DOMparser.parseFromString(data, "text/html");
  var bodyHTML = DOMdata.body;
  $('#resultado').html(bodyHTML);
});

request.fail(function(jqXHR, textStatus) {
  alert("Error : " + textStatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="resultado"></div>

NOTA:

En el caso concreto del body, si tú haces esto:

  $("body").html(bodyHTML);

te va a duplicar el body.

Deberás usar en ese caso:

  $("body").replaceWith(bodyHTML);
8
  • interesante, lo intentare y vere que tal funciona xd gracias Commented el 5 feb. 2018 a las 1:52
  • 1
    Mariano tiene razon, me fallo con el match me da error desconocido xd Commented el 5 feb. 2018 a las 2:07
  • 2
    @Mariano implementé una solución con DOMParser. Me parece interesante en este caso poder tratar la respuesta obtenida como si fuera el mismo DOM. Gracias por la advertencia sobre RegEx.
    – A. Cedano
    Commented el 5 feb. 2018 a las 3:24
  • 1
    @EddyOtsutsuki prueba esta nueva solución.
    – A. Cedano
    Commented el 5 feb. 2018 a las 3:26
  • 1
    @A.Cedano Ahora sí, está perfecto, y es exactamente el tipo de solución que recomendaría usar por sobre cualquier otra
    – Mariano
    Commented el 5 feb. 2018 a las 3:28
1

Puedes usar la función load de Jquery para obtener el contenido de una página html externa y agregar el contenido a un div, por ejemplo, del documento actual:

$( "#divactual" ).load( "pagina.html #bodydeldocumento" );

Necesitas agregar un identificador a la parte del otro documento a la que quieras acceder, en el ejemplo #bodydeldocumento, se refiere a:

<body id="bodydeldocumento"></body>

Usando ajax se vería algo como esto:

 $.ajax({
     url: 'pagina.html',
     success: function(response) {
       $( "#divactual" ).load( "pagina.html #bodydeldocumento" );
     }
 });
5
  • ah comprendo, ya habia leido eso pero no me queda claro xd gracias por tu paciencia y respuesta. Commented el 5 feb. 2018 a las 0:32
  • vere si funciona y ahorita acepto tu respuesta :) Commented el 5 feb. 2018 a las 0:38
  • no me funciona xd es que estoy usando la api ´History´de javascript Commented el 5 feb. 2018 a las 0:56
  • 1
    @EddyOtsutsuki edita tu pregunta para ser más específico. Commented el 5 feb. 2018 a las 0:58
  • listo ya la edite, espero me entiendas un poquito mejor Commented el 5 feb. 2018 a las 1:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.