php84

Curso de PHP🐘 y MySql🐬 [84.- PHP y Ajax Ejemplo practico]

Ajax es un conjunto de tecnologías de comunicación asíncrona entre nuestro servidor y nuestra pagina web lo que hace que nuestro sistema sea mucho mas rápido en este tutorial vamos a aprender a usar esta tecnología con un simple ejemplo en que leeremos las categorías de nuestra base de datos.

Codigo: https://github.com/programadornovato/php/commit/0c7b4ec959ad441853b15a05a5fe4716a1cd1c0f

<!doctype html>
<html lang="en">

<head>
    <title>AJAX</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <div class="container mt-3">
        <div class="row">
            <div class="col-12">
                <div class="form-group">
                    <button type="button" class="btn btn-primary" id="llenar">Llenar tabla</button>
                </div>
                <div class="form-group">
                    <select class="form-control" id="categorias">
                    </select>
                </div>
            </div>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            $("#llenar").click(function (e) { 
                $.ajax({
                    type: "GET",
                    url: "categoriasJson.php",
                    dataType: "json",
                    success: function (response) {
                        response.forEach(element => {
                            //alert(element.categoria);
                            $("#categorias").append("<option>"+element.categoria+"</option>");
                        });
                    }
                });
                
            });
        });
    </script>
</body>
</html>

<?php
    include_once "db_empresa.php";
    $con=mysqli_connect($db_host,$db_user,$db_pass,$db_database);
    $query="SELECT categoria FROM productos group by categoria;";
    $res=mysqli_query($con,$query);
    $arrayJson=array();
    while ( $row=mysqli_fetch_assoc($res) ){
        $arrayJson[]=$row;
    }
    echo json_encode($arrayJson);
?>

🔗Visualizar Json: http://jsonviewer.stack.hu/
🔗Font Awesome Codes: https://marketplace.visualstudio.com/items?itemName=medzhidov.font-awesome-codes-html
🔗 CDN fontawesome: https://www.bootstrapcdn.com/fontawesome/
🔗 Icono de Carrito: https://fontawesome.com/icons/cart-plus?style=solid

🎦 Esta lista de reproducción: https://www.youtube.com/playlist?list=PLCTD_CpMeEKS2Dvb-WNrAuDAXObB8GzJ0

Codigos en gdrive: https://drive.google.com/file/d/1tQwYvfL2jiUFc6beTWkOkGmXkq5zzFw2/view?usp=sharing
Gracias por apoyar este canal: https://www.patreon.com/programadornovato?fan_landing=true

🔗 Facebook: https://facebook.com/ProgramadorNovatoOficial
🔗 Twitter: https://twitter.com/programadornova
🔗 Linkedin: https://www.linkedin.com/in/programadornovato/
🔗 Instagram: https://www.instagram.com/programadornovato/

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)