1

Estou fazendo uma requisição ajax para uma URL externa e quero mostrar apenas três elementos do site original na pagina que Eu desenvolvi.

Porém ao executar o código ele traz todos os elementos da pagina.

Da pagina em questão Eu quero mostrar apenas os elementos "Usuário (user)" "Senha (password)" e o botão "Ok", como Eu faço para mostrar apenas estes 3 elementos na pagina?

Obs.: Quero mostrar os elementos mesmo e que ao colocar usuário e senha e clicar em OK ele seja direcionado para a URL original, siga o fluxo normal de login.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Exemplo AJAX</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://projetos.lucaspeperaio.com.br/ajax-cross-domain/jquery.xdomainajax.js"></script>


    <script type="text/javascript">
$(function () {
    $("#btn-ajax-jquery").click(function () {
        $.ajax({
            type: 'POST',
            url: "http://www.site.com.br",                  
            dataType: "html",
            beforeSend: function () {
                $("#resposta").html("Aguarde...");
            },
            success: function (data) {
                $("#resposta").html(data);
            },
            error: function (err) {
                console.log("Error: " + err.status);
                console.log("Error Message: " + err.statusText);
            }
        });
    });
});


function ajaxExecute() {
    var result = document.getElementById("resposta");   
    var ajax;  

    // Instancia o AJAX
    if(navigator.appName == "Microsoft Internet Explorer"){  
        ajax = new ActiveXObject("Microsoft.XMLHTTP");  
    }   
    else {  
        ajax = new XMLHttpRequest();
    }  

    // Faz requisição
    ajax.open("GET", "http://www.site.com.br", true );

    ajax.onreadystatechange = function () {
        if (ajax.readyState == 1) {
            result.innerHTML = "Aguarde...";
        }
        if (ajax.readyState == 4) {
            // Status OK            
            if (ajax.status == 200) {
                // Exibe o resultado
                result.innerHTML = ajax.responseText;
            }
            else {
                // Em caso de erro mostra a mensagem
                result.innerHTML = ajax.statusText;
            }
        }
    }    
    ajax.send(null);
}  
    </script>

</head>
<body onload='ajaxExecute()'>
<h1>Exemplo Ajax</h1>


<div id="resposta"></div>


</body>
</html>

1 Resposta 1

2

Você pode converter o retorno da requisição em html e então extrair os dados que você quiser. Por exemplo:

var $log = $("#log"),
  str = "hello, <b>my name is</b> jQuery.", /* Aqui seria o retorno da requisicao */
  html = $.parseHTML(str), /* Aqui converte o texto em HTML para o jquery poder extrair informacoes */
  nodeNames = [];


$log.append(html);

$.each(html, function(i, el) {
  nodeNames[i] = "<li>" + el.nodeName + "</li>";
});

$log.append("<h3>Node Names:</h3>");
$("<ol></ol>")
  .append(nodeNames.join(""))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log">
  <h3>Content:</h3>
</div>

Abaixo exemplo de como ficaria:

$(function () {
    $("#btn-ajax-jquery").click(function () {
        $.ajax({
            type: 'POST',
            url: "http://www.site.com.br",                  
            dataType: "html",
            beforeSend: function () {
                $("#resposta").html("Aguarde...");
            },
            success: function (data) {
                var html = $.parseHTML(data); /* Aqui converte o texto em HTML para o jquery poder extrair informacoes */

                /* Com a varivel html recebendo o conteudo da outra página, agora é só buscar os dados do html. Para isso vc pode usar o próprio Jquery */    

                $("<ol></ol>").append(nodeNames.join(""));
            },
            error: function (err) {
                console.log("Error: " + err.status);
                console.log("Error Message: " + err.statusText);
            }
        });
    });
});
0

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 .