Esta é a aula 04 do curso de JSON – Veja o cronograma completo aqui.
Continuando a aula anterior, agora que temos o retorno de todos os dados do banco de dados, vamos criar o código JS dentro da nossa aplicação mobile. Note que agora iremos programar um arquivo HTML que será executado no nosso aplicativo mobile.
Nós já aprendemos a realizar a leitura de dados com JSON, agora vamos aprender apenas a realizar a comunicação, o resto, já sabemos como fazer;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de Ofertas</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>Ofertas de Atibaia</h1>
<hr>
<!-- div em que será exibida as ofertas -->
<div id="conteudoJSON"></div>
<script>
// conecta ao servidor
var xmlhttp = new XMLHttpRequest();
var url = "http://appcinema.esy.es/mobile/lista_ofertas.php";
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
ConectaServidor(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function ConectaServidor(response) {
var dados = JSON.parse(response); //faz a conversão do texto da WEB para JSON
var i;
var conteudo = "";
for(i = 0; i < dados.length; i++) //dados.length retorna o tamanho do vetor.
{
conteudo += dados[i].nome_do_mercado +
"<br>" + dados[i].produto +
"<br>R$ " + dados[i].valor +
"<br>" + dados[i].observacao +
"<hr>" ;
}
document.getElementById("conteudoJSON").innerHTML = conteudo;
}
</script>
</body>
</html>
O resultado do arquivo HTML será este: http://appcinema.esy.es/mobile/app_ler_ofertas.html. embora eu tenha colocado uma cópia neste arquivo na web, é importante entender que este é o HTML do seu aplicativo e que ele não precisa estar publicado na web.