Tengo dos archivos php (mismo dominio):

main.php
test.php

Estructura de main.php

<div class="box">Hello:</div>

Estructura de test.php

<div class="names">
  <span>Andy</span>
  <span>Sandra</span>
</div>
<div class="colors">
  <span>Blue</span>
  <span>Blue</span>
</div>

Ahora quiero insertar el contenido de "nombres" del "test.php" dentro del div "cuadro" de "main.php" después del contenido "Hola:".

Intento algo como:

$( ".box" ).load( "http://website.com/test.php .names" );

¿Pero "cargar" parece estar reemplazando el contenido?

Entonces trato de $ .get:

$.get( "http://website.com/test.php .names", function( data ) {
  $( ".box" ).html( data );
});

Pero "$ .get" ignora el nombre de mi clase y también "reemplaza" el contenido por completo.

¿Cuál es mi falla?

0
Pepe 27 oct. 2017 a las 21:04

3 respuestas

La mejor respuesta

Puedes usar la clase como abajo

<div class="names">
  <span>Andy</span>
  <span>Sandra</span>
</div>

Y luego use el siguiente script

$( ".box" ).append($("<div>").load("http://website.com/test.php .names"));

Editar: puedes hacerlo con ajax también de una manera diferente

$.ajax({
    url: 'http://website.com/test.php',
    dataType: 'html',
    success: function(html) {
        var div = $('.names', $(html));
        $(".box").append(div);
    }
});
2
Niladri 27 oct. 2017 a las 18:45

Debe usar la función jquery append

[http://api.jquery.com/append/font>[1]

Le permite agregar datos al final del selector de destino.

0
Leandro 27 oct. 2017 a las 18:38

Cuando ejecuta $( ".box" ).load( "http://website.com/test.php .names" ); en este HTML <div class="box">Hello:</div> está reemplazando el contenido de <div class="box"></div> (en este caso Hello:). $( ".box" ).html( data ); está haciendo lo mismo (de hecho, puede ser cómo load() se implementa bajo el capó. Si desea preseleccionar el contenido, simplemente puede capturarlo antes de reemplazarlo o posiblemente alterar su html como esta:

<div class="box">Hello:<span id='Names'></span></div>

Con un guión como este:

$("#Names").load("http://website.com/test.php .names");
0
Jason Sperske 27 oct. 2017 a las 18:32