jQuery-Ajax query with PHP

Asked

Viewed 87 times

-1

I made a code with jQuery-Ajax. In order to consult the bank without much complication or objections, just SELECT * FROM produto. The result was right from the moment I tried to make a filter query using the tag <select><option> and sending by ajax the answer to go to PHP trying to change to SELECT * FROM produto WHERE Tipo='$_POST[Tipo]' He doesn’t return anything to me on the website. When I do the inspection to see it has some error in the NETWORK it shows the right search by category but does not display it on the site.

$(document).ready(function () {
    $("#Tipo").on('change', function () {
        var Tipo = ($(this).val());
        $.ajax({
            type: 'POST',
            url: '../php/cardapio.php',
            data: {
                Tipo: Tipo,
            },
            success: function () {

            }
        });
        return false;
    });
});

   <div class="col-4 pt-1">
                <!-- Select cardapio -->
                <span style="font-size: 10px; color: deepskyblue;">Categoria:</span>
                <br>
                <select id="Tipo" name="Tipo" class="select">
                    <option value="todos" selected>Todos</option>
                    <option value="acais">Açais</option>
                    <option value="tapiocas">Tapiocas</option>
                    <option value="marmitas">Marmitas</option>
                    <option value="bebidas">Bebidas</option>
                </select>
            </div>

        <!-- Tabela cardapio -->
        <div class="row hover-table-layout">
            <div class="cardapio" id="cardapio">
            </div>
        </div>

    <?php  

        $pasta = '../img/img_produto/';
        $imagem = glob("$pasta{*.jpg,png,jpeg}", GLOB_BRACE);
        $Tipo = $_POST['Tipo'];
        $result_produto = "SELECT * FROM produto WHERE Tipo='$Tipo'";
        $resultado_produto = mysqli_query($conn, $result_produto);
        while($row_produto = mysqli_fetch_assoc($resultado_produto)){

     echo"
            <div class='listing-item'>
                <figure class='image'>
                    <img class='cardapio-img' src='".$pasta.$row_produto['Img_produto']."' id='produto' alt='".$row_produto['Nome_produto']."'>
                    <figcaption>
                        <div class='caption'>
                        </div>
                    </figcaption>
                </figure>
                <div class='listing'>
                    <h4 class='cardapio-h4'>".$row_produto['Nome_produto']."</h4>
                    <h4 class='cardapio-h4'>".$row_produto['Descricao_produto']."</h4>
                    <h4 class='cardapio-h4'>" .$row_produto['Preco_produto']. "</h4>
                    <button class='btn button-cardapio'>Adicionar</button>
                </div>
            </div>
        "; 
            };
?>
php html jquery ajax

  • You can do a test to see if your PHP file is working, change it $_POST['Tipo'] for that reason $_GET['Tipo'] and then try to access the url from the browser http://seusite.com/php/cardapio.php?Tipo=Bebidas, see if the result is as expected.

1 answer

0

Check in Phpmyadmin if your query is actually returning some record.

Also check the values of the data being passed by ajax.

In javascript:

success: function(data) {
  console.log(data); // Acesse o console do navegador para visualizar
}

In php:

echo $_POST['Tipo'];

This way you will probably get the result you want to get. It is important to note, also, that in the informed code nothing is being done with the return of PHP data. This should be done in Success.

Example

success: function(data) {
  $('#cardapio').html(data);
}

Browser other questions tagged php html jquery ajax

You are not signed in. Login or sign up in order to post.