Pessoal, estou com um problema aqui. Quero mostrar de forma assíncrona o resultado da minha busca no banco. (Estou utilizando o Axios). Na hora de mostrar os resultados, recebo o erro "Categorias is not defined" no console.
Estou chamando a função em JS no evento click, a partir dessa função eu faço a requisição para o meu back usando o Axios e após isso tento mostrar os resultados, mas sem sucesso.
O HTML:
<div class="container">
<form action="" method="GET">
<h5>Buscar categoria por nome</h5>
<div class="form-group">
<input name="categoria" id="categoria" type="text" class="form-control" id="exampleInputEmail1">
</div>
<button name="buscar" type="submit" class="btn btn-primary" onclick="buscarCategoria(event)">Buscar</button>
</form>
</div>
<div id="resultados" style="display: none;">
</div>
O arquivo index.js onde estão as funções:
function buscarCategoria(event){
event.preventDefault(); /*Impede que a ação deafault do elemento seja executada, nesse caso é o submit*/
let inputCat = document.getElementById('categoria');
let categoria = inputCat.value; /*valor será capturado aqui*/
let nome_categoria = JSON.stringify(categoria);
}
axios.get('http://localhost/Quimica/php/recebe_json.php', {})
.then(response => {
mostraCategorias(response.data);
})
.catch(error => {
console.log(error)
})
function mostraCategorias() {
// Mostrando a div com o resultado, que esta originalmente como display:none
document.getElementById('resultados').style.display = "block"
// Mostrando os resultados:
document.getElementById('resultados').innerHTML = `
<p><b>Nome da categoria: </b> ${categorias} </p>
`
}
O arquivo PHP onde esta a query:
<?php
header ('Content-type:application/json');
include ('conexao.php');
$json = file_get_contents('php://input');
//file_get_contents:
$palavra = json_decode($json);
buscar_nome_cat($conexao, $palavra);
function buscar_nome_cat ($conexao, $palavra){
try {
$query = $conexao->prepare ("SELECT * FROM CATEGORIAS WHERE NOME_CATEGORIA = '$palavra' ");
if ($query->execute()){
$categorias = $query->fetchAll();
if ($categorias){
echo json_encode ($categorias);
}
}
}
catch (PDOException $e){
echo ("Erro: ".$e->getMessage);
}
}
Perdoem qualquer erro grosseiro, estou ainda aprendendo . Qualquer ajuda salvaria meu dia.