Show a single DIV with Ajax

Question

Show a single DIV with Ajax

Navigation

#1 by (2 votes)

1

I'm making an ajax request for an external URL and I want to show only three elements of the original site on the page I've developed.

But when you run 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" and the "Ok" button, how do I show only these 3 elements on the page?

Note: I want to show the same elements and when I enter the username and password and click OK it will be 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><scripttype="text/javascript" src="http://projetos.lucaspeperaio.com.br/ajax-cross-domain/jquery.xdomainajax.js"></script><scripttype="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 html jquery ajax

asked by anonymous 27.09.2015 / 23:24

1 answer

recover data from JSON file Change element with jquery

score 2 · Accepted Answer

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><divid="log">
  <h3>Content:</h3>
</div>

Below is an 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);
            }
        });
    });
});