Javascript - Attesa chiamata getJSON prima di caricare il body

Forum - Javascript - Attesa chiamata getJSON prima di caricare il body

giocala88 (Normal User)
Expert

Messaggi: 248
Iscritto: 23/04/2008

Postato alle 11:48
Mercoledì, 10/01/2018

Salve ragazzi,
avrei bisogno di implementare un sistema che visualizzi il body della pagina html solo quando la chiamata $.getJSON ha restituito il risultato. Esempio:

test.html

Codice sorgente - presumibilmente Javascript

<!DOCTYPE html>
<html>
<head>
        <meta charset=utf-8 />
        <title></title>
        <link rel="stylesheet" type="text/css" media="screen" href="css/master.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <!--[if IE]>
                <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
<script>$.getJSON('script.php', function (d) { $('body').html(d); });</script>
 
</head>
<body>
 <h1>Ciao</h1>
</body>
</html>

script.php

Codice sorgente - presumibilmente Plain Text

<?php $array = array('result'=>'ok'); sleep(5); echo json_encode($array); ?>

Se io andassi alla pagina test.html questa per 5 sec mi visualizzerebbe "<h1>Ciao</h1>" e invece io vorrei che non mi visualizzasse nulla fino a lettura completata della chiamata $.getJSON.

In che modo posso farlo? Grazie.

Roby94 (Member)
Guru

Messaggi: 1170
Iscritto: 28/12/2009

Postato alle 13:57
Mercoledì, 10/01/2018

Non hai spiegato perche debbano esserci degli elementi nel body inizialmente.
Comunque buona norma quando si predispone un caricamento asincrono delle pagine e che venga fatto capire all'utente che un caricamento sta effettivamente avvenendo e che non vi sia un errore intrinseco nella pagina che ne impedisca il caricamento.
Puoi predisporre un elemento all'interno della pagina che venga visualizzato solo in fase di caricamento.
Qando parte una richiesta json rendi visibile il suddetto elemento e lo nascondi una volta che il caricamento è avvenuto. Hai un minimo di basi di CSS?