Categoría: JavaScript

Ejercicio JS DOM

ejercicio

En la página anterior realizar un js que nos permita:

Ver todos los elementos que están dentro de una lista

Ver todos los elementos que están dentro de un td

Poner todos los elementos que tengan una y griega dentro de su texto de color rojo (todo el elemento)

Mostrar un listado de todos los id’s

Mostrar un listado de todas las clases

Ejercicio actores pseudo autocompletar

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        Actor:<input type="text" id="actor"><br/>
        <div id="lista"></div>
        <script>
            $(function () {
                console.log("Página cargada");
                $('#actor').keyup(function () {
                    console.log("Pulsado");
                    fetch('fetch_backend.php?actor='+$('#actor').val(), {
                        method: 'GET',
                    })
                            .then(function (response) {
                                console.log(response);
                                return response.json();
                            })
                            .then(function (data) {
                                console.log('data = ', data);
                                $('#lista').html('');
                                for(i=0;i<data.length;i++){
                                    $('#lista').append(data[i]+"<br>");
                                }
                            })
                            .catch(function (err) {
                                console.error(err);
                            });
                });
            });
        </script>
    </body>
</html>


<?php

$server = "localhost";
$user = "root";
$password = "";
$db = "sakila";
try {
    $conn = new PDO("mysql:host=$server;dbname=$db;charset=UTF8", $user, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $actor = filter_input(INPUT_GET, "actor");
    $sql = "select * from actor "
            . "where first_name like :actor "
            . "or last_name like :actor limit 10";
    $parametros = [
        'actor' => '%' . $actor . '%'
    ];
    $st = $conn->prepare($sql);
    $st->execute($parametros);
    $resultado = [];
    while ($fila = $st->fetch()) {
        $resultado[] = $fila['first_name'] . " " . $fila['last_name'];
    }
    echo json_encode($resultado);
} catch (Exception $e) {
    echo "Connection failed: " . $e->getMessage();
}

Como usar fetch en JS

Fetch

 <body>
        Importe:<input type="text" id="importe"><br/>
        Plazos:<input type="text" id="plazos"><br/>
        <button id="ajax">Pulsa aquí para probar el ajax</button>
        <div id="resultado"></div>
        <script>
            $(function () {
                console.log("Página cargada");
                $('#ajax').click(function () {
                    console.log("Pulsado");

                    fetch('ajax_backend.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body: 'importe=' + $("#importe").val() + '&plazos=' + $("#plazos").val()
                    })
                            .then(function (response) {
                                console.log('response =', response);
                                return response.json();
                            })
                            .then(function (data) {
                                console.log('data = ', data);
                                $('#resultado').html("<ul>");
                                for (prop in data) {
                                    $('#resultado').append("<li>" + data[prop] + "</li>");
                                }
                                $('#resultado').append("</Ul>");
                            })
                            .catch(function (err) {
                                console.error(err);
                            });
                   
                });
            });
        </script>
    </body>

Ejercicio Ajax

Hacer un backend al que le pasemos por POST dos parámetros:
Importe y Plazos
El Backend creará una tabla con tantos elementos como plazo y los valores serán:

primer elemento: Importe/plazo*1.2
Segundo: Importe/plazo*1.2
Tercero: Importe/plazo*1.1
Cuarto: Importe/Plazo*1.1
Resto: Importe/Plazo

El backend devuelve la tabla como JSON

Tendremos un fronend con dos campos: Importe y Plazos y un botón de calcular. Cuando le de a calcular llamará al backend, recuperará la tabla, la convertirá a tabla de javascript y la imprimirá como una lista (ul) en un div.

$importe = filter_input(INPUT_POST, "importe");
$plazo = filter_input(INPUT_POST, "plazos");

$tabla = [];

$cantidad = $importe / $plazo;
for ($i = 0; $i < $plazo; $i++) {
    if ($i < 2) {
        $tabla[] = round($cantidad * 1.2,2);
    } elseif ($i < 4) {
        $tabla[] = round($cantidad * 1.1,2);
    } else {
        $tabla[] = round($cantidad,2);
    }
}
/*
array_walk($tabla, function(&$valor){
    $valor= round($valor,2);
});*/
echo json_encode($tabla);
  Importe:<input type="text" id="importe"><br/>
        Plazos:<input type="text" id="plazos"><br/>
        <button id="ajax">Pulsa aquí para probar el ajax</button>
        <div id="resultado"></div>
        <script>
        $(function(){
           console.log("Página cargada"); 
           $('#ajax').click(function(){
               console.log("Pulsado");
               $.post("ajax_backend.php",
               {"importe":$("#importe").val(),
               "plazos":$("#plazos").val()},
               function(data){
                   console.log("resultado "+data);
                  var objeto=JSON.parse(data);
                  $('#resultado').html("<ul>");
                  for(prop in objeto){
                      $('#resultado').append("<li>"+objeto[prop]+"</li>");
                  }
                   $('#resultado').append("</Ul>");
               });
           });
        });
        </script>

Ajax con post y objetos

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     
    </head>
    <body>
        Nombre:<input type="text" id="first_name"><br/>
        Apellidos:<input type="text" id="last_name"><br/>
        <button id="ajax">Pulsa aquí para probar el ajax</button>
        <div id="resultado"></div>
        <script>
        $(function(){
           console.log("Página cargada"); 
           $('#ajax').click(function(){
               console.log("Pulsado");
               $.post("ejemplo_ajax_backend.php",
               {"first_name":$("#first_name").val(),
               "last_name":$("#last_name").val()},
               function(data){
                   console.log("resultado "+data);
                  var objeto=JSON.parse(data);
                  for(prop in objeto){
                      $('#resultado').append(prop + " - "+objeto[prop]+"<br/>");
                  }
               });
           });
        });
        </script>
    </body>
</html>

<?php

$first_name= filter_input(INPUT_POST, "first_name");
$last_name= filter_input(INPUT_POST, "last_name");

$res=["Nombre"=>$first_name,"Apellidos"=>$last_name];

echo json_encode($res);

Ajax un poco menos simple

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     
    </head>
    <body>
        <button id="ajax">Pulsa aquí para probar el ajax</button>
        <div id="resultado"></div>
        <script>
        $(function(){
           console.log("Página cargada"); 
           $('#ajax').click(function(){
               console.log("Pulsado");
               $.get("ejemplo_ajax_backend.php?tam=10",function(data){
                   console.log("resultado "+data);
                  var tabla=JSON.parse(data);
                  console.log(tabla);
                  for(i=0;i<tabla.length;i++){
                      $('#resultado').append(tabla[i]+"<br/>");
                  }
               });
           });
        });
        </script>
    </body>
</html>


<?php

$lista=[];
$tam= filter_input(INPUT_GET, "tam",FILTER_SANITIZE_NUMBER_INT);
for($i=0;$i<$tam;$i++){
   $lista[]= str_repeat("*", mt_rand(1,20)); 
}
echo json_encode($lista);

Ajax simple

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     
    </head>
    <body>
        <button id="ajax">Pulsa aquí para probar el ajax</button>
        <div id="resultado"></div>
        <script>
        $(function(){
           console.log("Página cargada"); 
           $('#ajax').click(function(){
               console.log("Pulsado");
               $.get("ejemplo_ajax_backend.php",function(data){
                   console.log("resultado "+data);
                   $('#resultado').append(data+"<br/>");
               });
           });
        });
        </script>
    </body>
</html>

<?php
echo mt_rand(1,10);

CRUD AJAX

actores_ajax (html)

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="actores.js" type="text/javascript"></script>
    </head>

    <body>
        <p>Nombre<input type="text" id="first_name" name="first_name"></p>
        <p>Apellidos<input type="text"  id="last_name" name="last_name"></p>
        <input type="button" value="Añadir" id="nuevo">
        <div id="mensaje"></div>
        <div id="lista"></div>
    </body>
</html>

actores.js (ajax)

$(function () {
    cargar();
    function cargar() {
        $.get("actores_ajax_back.php?funcion=lista", function (data) {
            $("#lista").html(data);
            $(".borrar").click(function () {
                console.log($(this));
                console.log($(this).val());
                $.post("actores_ajax_back.php?funcion=borrar",
                        {actor_id: $(this).val()})
                        .done(function (data) {
                            console.log(data);
                            $('#mensaje').html("Borrado");
                            cargar();
                        });
            });
        });
    }
    $("#nuevo").click(function () {
        $.post("actores_ajax_back.php?funcion=nuevo",
                {first_name: $('#first_name').val(), last_name: $('#last_name').val()})
                .done(function (data) {
                    $('#mensaje').html("Insertado con id " + data);
                    cargar();
                });
    });

});

actores_ajax_back.php (backend)

<?php
$server = "localhost";
$user = "root";
$password = "";
$db = "sakila";
try {
    $conn = new PDO("mysql:host=$server;dbname=$db;charset=UTF8", $user, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (Exception $e) {
    echo "Connection failed: " . $e->getMessage();
}
$funcion = filter_input(INPUT_GET, "funcion");

if (function_exists($funcion)) {
    $funcion($conn);
}

function lista($conn) {
    try {
        $sql = "select * from actor";
        $q = $conn->query($sql);
        ?>
        <table>
            <tr><td>Id</td><td>Nombre</td><td>Apellido</td><td>Acciones</td>
            </tr>
            <?php
            while ($row = $q->fetch()) {
                ?> 
                <tr><td><?= $row['actor_id'] ?></td>
                    <td><?= $row['first_name'] ?></td>
                    <td><?= $row['last_name'] ?></td>
                    <td><button class="borrar" value="<?= $row['actor_id'] ?>">Borrar</button></td>
                </tr>
                <?php
            }
            ?></table><?php
    } catch (Exception $ex) {
        echo $ex->getMessage();
    }
}

function nuevo($conn) {
    try {
        $first_name = filter_input(INPUT_POST, "first_name", FILTER_SANITIZE_MAGIC_QUOTES);
        $last_name = filter_input(INPUT_POST, "last_name", FILTER_SANITIZE_MAGIC_QUOTES);
        if (!empty($first_name) && !empty($last_name)) {
            $sql = "insert into actor(first_name,last_name) values ('$first_name','$last_name')";
            //Ejecutarlo
            if ($conn->exec($sql) > 0) {
                echo $conn->lastInsertId();
            }
        }
    } catch (Exception $ex) {
        echo $ex->getMessage();
    }
}
function borrar($conn) {
    try {
        $actor_id = filter_input(INPUT_POST, "actor_id");
         if (!empty($actor_id) ) {
            $sql = "delete from actor where actor_id=$actor_id";
            //Ejecutarlo
            echo $conn->exec($sql);
        }
    } catch (Exception $ex) {
        echo $ex->getMessage();
    }
}