7

Pegar conteúdo de outra página por javascript ou jquery

Em outra pergunta eu queria saber como pegar conteúdo de uma página.

Neste eu queria através deste código pegar apenas uma <div> ao invés do conteúdo inteiro. Vamos supor que eu queria pegar todo conteúdo de uma <div> chamada teste.

Como pegar apenas uma <div>?

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="estilo.css">
    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript" src="http://projetos.lucaspeperaio.com.br/ajax-cross-domain/jquery.xdomainajax.js"></script>

</head>
<body>
    <script>
        $.ajax({
             url: 'http://agenciaroadie.com.br/loja.php',
             type: 'GET',
             success: function(res) {
                 var headline = $(res.responseText).text();
                 $("#cabecalho").html(headline);
             }
        });
    </script>
    <div id="cabecalho">

    </div> 
</body>

2 Respostas 2

5

Eu utilizaria o método .find no conteúdo da resposta da sua requisição. Pode parecer estranho a princípio, isso funciona perfeitamente.

Veja:

$.ajax({
    url: 'http://agenciaroadie.com.br/loja.php',
    type: 'GET',
    success: function(res) {
        var headline = $(res.responseText).find('#id_da_div_que_eu_quero'); 
        $("#cabecalho").html(headline);
    }
});    

Repare que não é necesário o .text. Isso muito útil caso você queira, por exemplo, selecionar elementos de uma classe específica.

Exemplo:

$(function(){

    // Suponhamos que esse é o conteúdo de outra página

    var html = '<ul>\
                    <li>1</li>\
                    <li>2</li>\
                    <p>Não é uma li</p>\
                </ul>';

    // Quero somente as LI
    
    var $lis = $(html).find('li');
    
    $('#element').html($lis);
})

Veja isso no JSFIDDLE

Exemplo com classes:

$(function(){

        var html = '<ul>\
                    <li class="impar">1</li>\
                    <li class="par">2</li>\
                    <li class="impar">3</li>\
                    <li class="par">4</li>\
                </ul>';

    // Quero somente os pares
    
    var $lis = $(html).find('li.par');
    
    $('#element').html($lis);
})

Veja no JSFIDDLE

Obtendo elementos filtrados de um conteúdo externo

Suponhamos que nós temos duas páginas:

  • index.html - A página onde estamos trabalhando
  • externo.html - A página externa, onde vamos procurar os elementos

Veja como funcionaria, de maneira prática, baseando-se nesse cenário:

Conteúdo externo:

#externo.html

<div id="conteudo">
   <ul>
      <li></li>
   </ul>
</div>

A página onde incuiremos o conteúdo de outra página

#index.html
    
<!DOCTYPE html>
<html>
<head>
    <title>Testando</title>

    <script type="text/javascript" src="seu_jquery.js"></script>

    <script type="text/javascript">
    $(function(){
       $.ajax({
          url: 'externo.html', // página da requisição externa
          type: 'GET',
          // parâmetro "html" vem com o conteúdo da página completo
          success: function(html) {
            
           // Pegamos somente <li> da página externa
            var $lis = $(html).find('#conteudo > ul > li');

           // Mandamos para o elemento de id "cabecalho" da nossa página
            $("#cabecalho").html($lis);
        }
      }); 
    });
    </script>
</head>
<body>
     <div id="cabecalho"></div>
</body>
</html>
9
  • Muito bom, tem como buscar tags ou classes também? Ou tags dentro de de uma ID? Commented 17/06/2015 às 15:04
  • Sim, eu citei isso acima, porém não coloquei no exemplo ^_^ Commented 17/06/2015 às 15:05
  • @Wallace neste exemplo a var html seria o endereço do site? exemplo var html = www.google.com ? Commented 17/06/2015 às 15:17
  • Não. Seria o conteúdo retornado pelo AJAX. A resposta da função $.ajax sempre cai no primeiro parâmetro da função success, que é representado pela variável response. Vou postar exemplo. Commented 17/06/2015 às 15:19
  • Neste assunto ai Eu fiquei boiando mesmo e não entendi, você se importa em postar um exemplo completo ai por favor, retirando do site pauloroberto.info a div wb_element_instance10, para Eu ver este negócio funcionando, pois isso muito me interessa e ja desisti disso no passado por não ter compreendido...Se não for tomar muito o seu tempo. Commented 17/06/2015 às 15:21
5

Podes usar o load do Jquery

$("#cabecalho").load("loja.php #teste");

jQuery Load

5
  • 1
    +1. Simples, bonito e objetivo. Commented 17/06/2015 às 14:54
  • Exactamente, para o que pretende penso que seja o mais prático.
    – lazyFox
    Commented 17/06/2015 às 14:57
  • A diferença é que, com o ajax, temos beforeSend, ou poderiamos setar o método de requisição como POST e outras coisas. Eu não sei se tem como fazer pelo load. :) Commented 17/06/2015 às 14:59
  • Veja os últimos exemplos da página do jQuery. Mas para ter mais controlo sobre o que se está a fazer também prefiro .$.ajax
    – lazyFox
    Commented 17/06/2015 às 15:03
  • ótimo isso mesmo ja sana a maldita duvida e em uma linha de código rsrs obrigado @azyFox
    – Gezer
    Commented 2/09/2016 às 1:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .