Etiqueta: ajax

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();
    }
}

Ejercicio trivial ‘pregunta.php’ con divide y vencerás

Nuestra página tiene que hacer lo siguiente:

– Buscar una pregunta en la base de datos al azar
– Guardar la información en una variable
– Codificarla en json e imprimirla.

Las preguntas son ¿Sabemos recuperar una fila de una base de datos? Deberíamos (PDO). El problema es que queremos una fila al azar. Bien, es tan sencillo como usar este sql:

select * from preguntas order by rand() limit 1

Una vez tenemos esto podemos directamente pasar la fila al javascript o podemos crear nuestra variable dándole un poco de formato:

Si mi fila es $fila sería algo así:

$res['pregunta']=$fila['pregunta'];
$res['correcta']=$fila['respuesta1'];
$res['respuestas']=[$fila['respuesta1'],$fila['respuesta2'],$fila['respuesta3'],$fila['respuesta4']];
shuffle($res['respuestas']);

He aprovechado para desordenar las respuestas. Una vez hecho esto sólo hay que codificar en json e imprimir.

Ajax con js

index.php:

  <input type="text" id="nombre">
        
        
        <div id="resultado"></div>
        <script>
            document.getElementById("nombre").addEventListener("keyup", function () {
                var pepe = new XMLHttpRequest();

                pepe.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById('resultado').innerHTML = this.responseText;
                        console.log(this.responseText);
                    }
                }
                var nombre=document.getElementById('nombre').value;
                pepe.open("POST", "datos.php");
                pepe.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                pepe.send("nombre="+nombre);


            })
        </script>

datos.php:

<?php

$nombre = filter_input(INPUT_POST, "nombre");
$server = "localhost";
$user = "root";
$password = "";
$db = "sakila";
try {
    $conn = new PDO("mysql:host=$server;dbname=$db", $user, $password, [PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"]);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $sql="select * from actor where first_name like '%$nombre%'";
    
    $res=$conn->query($sql);
    $actores=$res->fetchAll();
    echo "<actores>";
    foreach($actores as $actor){
        echo "<actor><first_name>".$actor['first_name'].
                "</first_name><last_name>".$actor['last_name'].
                "</last_name></actor>";
    }
    echo "</actores>";

} catch (Exception $ex) {
    echo $ex->getMessage();
}

Ajax simple

  <input type="text" id="nombre">
        <input type="text" id="cantidad">
        <input type="button" id="boton" value="Llamada ajax">
        <div id="resultado"></div>
        <script>
            document.getElementById("boton").addEventListener("click", function () {
                var pepe = new XMLHttpRequest();

                pepe.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById('resultado').innerHTML = this.responseText;
                    }
                }
                var nombre=document.getElementById('nombre').value;
                var cantidad=document.getElementById('cantidad').value;
                pepe.open("GET", "datos.php?nombre="+nombre+"&cantidad="+cantidad);
                pepe.send();


            })
        </script>

Hola , que tal estamos