JSFiddle - React, Tailwind, and code Playground

by Rui Leite

HTML

<input id="inputNome" type="text" />
<input id="inputEmail" type="text" />
<div id="divExecuta">
    <!-- Resposta do servidor; cairá de paraquedas aqui dentro, via AJAX, devido à função ajax(): -->
    <script>
        var resposta = {
            "nome": "Rui Pimentel",
            "email": "[email protected]"
        };
        fcPreencheCampos(resposta);
    </script>
    <!-- Fim da resposta do servidor -->
</div>

JavaScript

function fcPreencheCampos(dados){
    document.getElementById("inputNome").value = dados.nome;
    document.getElementById("inputEmail").value = dados.email;
}

// Função de comodidade AJAX, que requisitará ao servidor os cookies previamente armazenados:
function ajax(){
    // ...
    
    // Criar objeto XmlHttpResponse, inicializar, preencher parâmetros da requisição, despachar...
    
    // ...
    
    // Ao receber a resposta, e após verificar se o status é 200, etc., etc.,
    // Grudamos o < script > recebido na < div >, o que fará com que ele seja prontamente executado:
    document.getElementById("divExecuta").innerHTML = xhr.responseText;
    
    // ...
}