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>