Javascript Requisição ao banco de dados com PHP sem refresh

[Julie Silveira]

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.
 

[GabrielSennaMs]

@Julie Silveira Bom tem alguns problemas no formulário e no envio.

 

5 horas atrás, Julie Silveira disse:

"Categorias is not defined"

 

Esse erro acontece porque você tenta chama uma variável chamada "categorias" na função "mostraCategorias()", e elá não existe dentro do escopo da função.

 

Quando você chama a função "mostraCategorias()" você passa a reposta da requisição para a função, porém você não defina na função esse argumento.

 

Para resolver esse problema basta definir um argumento na função.

 

Exemplo:

function mostraCategorias(categorias, request) // Agora a variável categorias existe no escopo da função e ela vai receber o resultado da request;
{
	// 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>`;
  	document.getElementById('resultados').innerHTML += `<div>${request}</div>`;
}

Bom feito isso o formulário ainda não vai funcionar, vai acontece os outros problemas.

 

Um dos problemas está na função "buscarCategoria()", a função pega o valor do input, porém ele não faz uma Request usando Axios. Por que não? Porque o código do Axios está fora da função.

 

function buscarCategoria(event)
{ // Escopo da função
	event.preventDefault();
	let inputCat = document.getElementById('categoria'); 
	let categoria = inputCat.value; /*valor será capturado aqui*/
	let nome_categoria = JSON.stringify(categoria); 
}

// Axios
axios.get('http://localhost/Quimica/php/recebe_json.php', {})
.then(response => {
	mostraCategorias(response.data); 
})
.catch(error => {
	console.log(error)
})

Com o código dessa maneira o Axios vai fazer uma Request quando a página carregar, e não vai ser chamando quando o usuário fazer uma busca.

 

Para resolver isso, basta coloca o Axios dentro da função "buscarCategoria()", assim quando o usuário clicar no botão buscar a função vai fazer um Request usando o Axios.

function buscarCategoria(event)
{ // Escopo da função
	event.preventDefault();
	let inputCat = document.getElementById('categoria'); 
	let categoria = inputCat.value; /*valor será capturado aqui*/
	let nome_categoria = JSON.stringify(categoria); 
  	// Axios
	axios.get('http://localhost/Quimica/php/recebe_json.php', {})
	.then(response => {
		mostraCategorias(categoria, response.data); // Passando o valor do input e a resposta da request para a função mostraCategorias()
	})
	.catch(error => {
		console.log(error)
	})
}

 

Um dos ultimo problema que eu achei está na Solicitação(Request) que você faz para a URL"http://localhost/Quimica/php/recebe_json.php", esse problema é simples, você não passa o valor para fazer a pesquisa no banco de dados, e como você utiliza no seu php o método file_get_contents() com o argumento 'php://input', você só consegue ler o corpo bruto de uma solicitação do tipo POST, o outro problema aqui está no tipo de solicitação que você faz.

 

Para resolver esses problemas basta mudar o tipo de solicitação para POST e adiciona no corpo da solicitação o valor do input.

 

Exemplo:

function buscarCategoria(event)
{ // Escopo da função
	event.preventDefault();
	let inputCat = document.getElementById('categoria'); 
	let categoria = inputCat.value; /*valor será capturado aqui*/
	let nome_categoria = JSON.stringify(categoria); 
  	// Axios
	axios.post('http://localhost/Quimica/php/recebe_json.php', nome_categoria) // Agora o tipo de request é POST e no corpo está o valor do input
	.then(response => {
		mostraCategorias(categoria, response.data); // Passando o valor do input e a resposta da request para a função mostraCategorias()
	})
	.catch(error => {
		console.log(error)
	})
}

 

Bom deixando o código mais limpo ele deve ficar +- assim;

function buscarCategoria(event)
{
	let 
	  inputCat = document.getElementById('categoria'),
	  categoria = inputCat.value;
  
  	event.preventDefault();
  
	axios.post('http://localhost/Quimica/php/recebe_json.php', JSON.stringify(categoria))
	.then(response => {
		mostraCategorias(categoria, response.data);
	})
	.catch(error => {
		console.log(error)
	})
}

function mostraCategorias(categorias, request)
{
	let resultado = document.getElementById('resultados');
                                            
	resultado.style.display = "block";
	resultado.innerHTML = `<p><b>Nome da categoria: </b> ${categorias} </p>`;
	resultado.innerHTML += `<div>${request}</div>`;
 }

 

Obs..: Com o código assim você deve conseguir fazer a solicitação, porém você ainda vai ter que manipular a reposta da solicitação.

[Julie Silveira]

@GabrielSennaMs Muito obrigada! Vou rever a documentação do axios para retirar mais algumas dúvidas.