Vanilla Javascript - #48 Api Fetch com e sem JSON e com FormData
25/05/2021Nesse tutorial vou explicar como utilizar a API Fetch do Javascript tendo como requisição e resposta o JSON ou application/x-www-form-urlencoded.
Antes de mais nada vamos criar três arquivos, sendo eles:
- index.html
- javascript.js
- ProcessaController.php
index.html
Como o arquivo index.html será o mesmo tanto para a requisição com json quanto para a requisição sem json, já vamos deixá-lo pronto. Não podemos esquecer de criar uma div para receber o resultado e de linkar o script javascript.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="result"></div>
<script src="javascript.js"></script>
</body>
</html>API Fetch com JSON
Para utilizar a API Fetch com json, precisamos setar o header e utilizar a função JSON.stringify na requisição. Como vamos usar o PHP no backend vamos receber os dados com file_get_contents e retorná-lo com json_encode.
javascript.js
async function withJson()
{
let reqs = await fetch ('./ProcessaController.php',{
method:'POST',
headers:{
'Content-Type':'application/json',
'Accept':'application/json'
},
body: JSON.stringify({
campo: 'Thiago'
})
});
let ress = await reqs.json();
doc.querySelector('.result').innerHTML = ress;
}
withJson();ProcessaController.php
<?php
$json=json_decode(file_get_contents('php://input'));
echo json_encode('O usuário '.$json->campo.' logou!');API Fetch sem uso do JSON
Neste caso vamos utilizar o enctype application/x-www-form-urlencoded e vamos receber os dados no PHP normalmente através do $_POST.
javascript.js
async function withoutJson()
{
let reqs = await fetch ('./ProcessaController.php',{
method:'POST',
headers:{
'Content-Type':'application/x-www-form-urlencoded',
'Accept':'application/x-www-form-urlencoded'
},
body: 'campo=Thiago'
});
let ress=await reqs.text();
doc.querySelector('.result').innerHTML = ress;
}
withoutJson();ProcessaController.php
<?php
echo 'O usuário '.$_POST['campo'].' logou!';API Fetch com FormData
Podemos também enviar todos os dados do formulário, inclusive arquivos multipart/form-data através do ajax e do construtor FormData. Para isso, vamos precisar mudar um pouco o HTML para receber um formulário:
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="result"></div>
<div>
<form name="form" id="form" method="post" action="ProcessaController.php">
<input type="text" name="nome" id="nome" placeholder="nome"><br>
<input type="text" name="cpf" id="cpf" placeholder="cpf:"><br>
<input type="submit" id="btnSubmit" value="Enviar">
</form>
</div>
<script src="javascript.js"></script>
</body>
</html>javascript.js
async function withFormData(e)
{
e.preventDefault();
let formData=new FormData(document.querySelector('#form'));
let reqs = await fetch ('./ProcessaController.php',{
method:'POST',
body: formData
});
let ress=await reqs.text();
document.querySelector('.result').innerHTML = ress;
}
if(document.querySelector('#btnSubmit')){
let btnSubmit=document.querySelector('#btnSubmit');
btnSubmit.addEventListener('click',(e)=>withFormData(e),false);
}ProcessaController.php
<?php
echo $_POST['nome'].' e tem o cpf '.$_POST['cpf'];Então é isso pessoal, por hoje é só! Sucesso nos códigos e na vida!
Posts Relacionados
