Show a single DIV with Ajax

Asked

Viewed 528 times

1

I am making an ajax request for an external URL and want to show only three elements of the original website on the page I developed.

But when executing the code it brings all the elements of the page.

From the page in question I want to show only the elements "User (user)" "Password (password)" and the button "Ok", as I do to show only these 3 elements on the page?

Note: I want to show the same elements and that when putting user and password and clicking OK it is directed to the original URL, follow the normal login flow.

<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>
javascript jquery html ajax

1 answer

2


You can convert the return of the request into html and then extract the data you want. For example:

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>

Below example of how it would look:

$(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);
            }
        });
    });
});

Browser other questions tagged javascript jquery html ajax

You are not signed in. Login or sign up in order to post.