Ajax não exibe

Snoopy1 · Abril 16, 2016

Fiz um código em ajax que carrega a página text.html e criei dois alerts o primeiro para exibir o código html completo do text.html e o segundo para exibir apenas o texto "Hello World." que está na class example na html do text.html, obtenho êxito no primeiro alert, no entanto o segundo alert exibe uma caixa vazia.. Venho pedir ajuda de vocês para me ajudarem como puderem.

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>Load page</title>

	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

	<script type="text/javascript">
	if(window.XMLHttpRequest){
	variavelhtttp = new XMLHttpRequest();
	}else{
	alert("Withouth Ajax!");
	}
	</script>

</head>

<body>

	<button type="button" onclick="loadDoc()">Go</button>

	<script type="text/javascript">
		function loadDoc(){
			variavelhtttp= new XMLHttpRequest();
			variavelhtttp.open("GET","text.html",false);
			variavelhtttp.send();
			var y = variavelhtttp.responseText;
			alert(y);
			alert(  $( ".example" ).text() );
		 }
	</script>

</body>
</html>

text.html

<html>
<head>
	<title></title>
</head>
<body>
	<div class="example">Hello World.</div>
</body>
</html>

wootzor · Abril 17, 2016

É normal que o segundo alert não mostre nada porque não existe nenhum elemento com classe example na página onde fazes a requisição AJAX.

Don Benatti · Abril 17, 2016

var y = variavelhtttp.responseText;

alert($(".example").text());

"y" está na memória e não no documento, por tanto o jQuery não vai conseguir acessar, no entanto, ele aceita um segundo parâmetro onde pode usar para localizar um elemento.

$(selector, [param]);

$('<div class="example">Hello World.</div>', y).text()

Este exemplo é apenas para fins de aprendizado, quando quiser qualquer conteúdo vindo de uma requisição ajax, retorne este conteúdo e não outro, por exemplo, em text.html, poderia retornar "hello world" sem precisar de html, você também pode retornar JSON.

var y = '{"text":"Hello World!"}';

try {
    var parse = JSON.parse(y);
    
    if (parse) {
        alert(parse.text);
    }
}
catch (e) {
    alert("Erro no JSON!");
}

Quando tiver que pegar um html vindo de ajax, não retorne com as tags <html> <head> <body>, ao invés disso, retorne apenas os elementos do body, por exemplo, você retornaria apenas <div class="example">Hello World.</div>.

Existe ainda uma forma de colocar o resultado HTML no documento apenas para ler e depois remover, no entanto, não pode conter as tags <html><head><body>, como informei acima.

var y = '<div class="example">Hello World.</div>';

// Cria um elemento oculto
var divOculta = $(document.createElement("div")).appendTo("body");

divOculta.attr("class", "hiddenHtml");
divOculta.css("display", "none");
divOculta.html(y);

// Pega o texto vindo da requisição ajax
var text = $(".hiddenHtml .example").text();

// Remove o elemento oculto
$(".hiddenHtml").remove();

// Hello World.
alert(text);

Entrar

Arquivado

Ajax não exibe

Recommended Posts

Snoopy1 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wootzor 103

Compartilhar este post

Link para o post

Compartilhar em outros sites

Don Benatti 28

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

PHP+Codeigniter - Dúvida referente a PDV

PHP+Codeigniter - Dúvida em Relação a Teclas

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante