Como atualizar automaticamente uma pagina html usando ajax

Programação
#1

Gente, eu fiz um teste que chamava uma pagina php usando ajax mas eu fui tentar fazer o mesmo pra chamar uma pagina html e não consigo( eu n sou boa em ajax, to aprendendo agora), não sei como vou fazer isso. Alguem pode me dizer como poderia fazer ?

#2

Você precisa ter um tempo específico, por exemplo a cada 1 minuto?

Se você tem uma função em javascript que chama essa página, pode passá-la cronometrar assim…

window.setTimeout(funcaoAjax, 10000); // 1 minuto
#3

Olha a parte que estava tentando arrumar, ta bem confuso pq me falaram pra fazer um monte de coisa e por fim não sei o que por kkkkk

Se eu fosse por isso que vc me disse eu teria que colocar onde?

    <script src="jquery-3.2.1.js" rel="stylesheet" type="text/javascript" >
</script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
	
	function test_home()
	{
		$.ajax({
			type:"POST", 
			url:"index.html",
			async: true,
			data:{
				//naon sei o que por aq					
			},
			dataType: 'html',
			success:function(data){
				console.log('oi');
				console.log(data);
				document.getElementById('oi').innerHTML = data;
			
			},
            error: function(err)
            {
                console.log(err);
            }
		});
	}
	
	</script>
    </head>
<body>
    <div class="global-site">
        <header id="header">
            <div id="logo">
                <a href="index.html">
                    <img src="img/logomarca.png" >
                </a>
            </div>
            <menu id="menu">
                <menuitem class="menu_item">
                    _<a href="" onclick="test_home()" >HOME</a>_
                </menuitem>
               [...]
#4

Tente trocar isso…

type:"POST"

Por isso…

type:"GET"

Explicando os conceitos… você conseguiu chamar um php, porque é uma linguagem dinâmica de servidor (backend) com suporte para GET, POST, etc.

Já o html é uma linguagem estática e não suporta POST, apenas GET porque é o padrão da web, ou seja, use POST quando precisar mandar dados para outra página, e GET para pegar dados da página…

Onde você comentou no código…

data:{
    //naon sei o que por aq					
}

É chamado tecnicamente de payload, ou o corpo da requisição e é usado para passar parâmetros para a página que será chamada, por exemplo: para trazer o cadastro de uma pessoa lá no banco de dados (onde o php tem acesso e o html não…), porém preciso de um identificador (id) da pessoa para trazer seus dados, correto até aqui? Então o data do ajax seria para isso…

data: {
    idPessoa: 1
}

Com esse dado enviado junto no ajax, a página que irá retornar os dados, irá validar se esse id está no banco etc, tá pegando o jeito das coisas?
Você também pode trocar todo esse $.ajax pelo atalho…

$.get('index.html', {}, function(data) {
    console.log('oi');
    console.log(data);
    document.getElementById('oi').innerHTML = data;
}, 'html');

Tenha em mente que chamar páginas estáticas pelo ajax, não faz muito sentido, já que sua funcão é justamente buscar coisas dinamicamente, onde uma linguagem como php, java, python, etc são capazes de trazer… isso que te mostrei é considerado má prática, mas funciona… bons estudos!

#5

eu n to entendo muito bem o data, eu sei que vou usar ele para enviar algum parametro pra outro arquivo mas se vou chamar um html como vou enviar algo pra la, eu to meio confusa ainda nessa parte

#6

Isso

data: {
    idPessoa: 1
}

Eu te mostrei apenas para explicar o que é payload, no segundo exemplo, o corpo está vazio…

$.get('index.html', {},...

Onde está {} é um data vazio, já que o html não precisa e não entenderá os parâmetros passados, aí que está a diferença, uma linguagem de servidor conseguiria entender o data passado…

1 curtida