funciones jquery interesantes

En esta ocasión tenemos un ejemplo de como podemos utilizar estas funciones jquery para 

hacer una llamada por AJAX a nuestro servidor.

En un primer archivo llamado index.php ponemos el siguiente código:

<html>
<head>
        <title>Ejemplo sencillo de AJAX</title>
        <scriptsrc="https://code.jquery.com/jquery-3.6.1.js"integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="crossorigin="anonymous"></script>
</head>
<body>
<section>
<div>El primer valor:<input id="val1" type="number" name="val1" value="5" /></div>
<div>El segundo valor:<input id="val2" type="number" name="val2" value="8" /></div>
<div >Resultado:<span id="resultado" ></span></div>
<button onclick="AJAX( $('#val1').val(), $('#val2').val() , 'post')">AJAX</button>
<button onclick="POST( $('#val1').val(), $('#val2').val())">POST</button>
<button onclick="GET( $('#val1').val(), $('#val2').val())">GET</button>
</section>
<script>
function AJAX(valorCaja1, valorCaja2, metodo){      
        var parametros = {
                "val1" : valorCaja1,
                "val2" : valorCaja2              
        };
        $.ajax({
                data:  parametros,
                url:   'ajax.php',
                type:  'post',
                beforeSend: function () {
                        $("#resultado").html("Procesando, espere por favor...");
                },
                success:  function (response) {
                        alert(response);
                        $("#resultado").html(response);
                       
                }
        });
}


function POST(val1,val2){    
        var data = {
                "val1":val1,
                "val2":val2
        }
        $.post( "ajax.php", data , function(response) {
                //alert( "Data Loaded: " + response);
                $('#resultado').html(response);
                //document.getElementById('resultado').innerHTML += response;
        });
}


function GET(val1,val2){    
    var data = {
            "val1":val1,
            "val2":val2
    }
    $.get( "ajax.php", data , function(response) {
            //alert( "Data Loaded: " + response);
            $('#resultado').html(response);
            //document.getElementById('resultado').innerHTML += response;
    });
}


functon JAVASCRIPT(val1,val2){
        const req = new XMLHttpRequest();
        req.addEventListener("load", reqListener);
        req.open("GET", "http://www.example.org/example.txt");
        req.send();
}


function reqListener() {
        console.log(this.responseText);
}
</script>
</body>
</html>

En otro archivo tendremos el ajax.php que hace de controlador para generar la respuesta del AJAX.

<?php

if($_POST){

    if(isset($_POST['val1']) and !empty($_POST['val1']) and isset($_POST['val2']) and !empty($_POST['val2'])){

        $valor1 = $_POST['val1'];

        $valor2 = $_POST['val2'];

        $resul = $valor1 + $valor2;

        echo $salida = '<div style="color:red" >'.$resul.'</div>';

    }

}

if($_GET){

    if(isset($_GET['val1']) and !empty($_GET['val1']) and isset($_GET['val2']) and !empty($_GET['val2'])){

        $valor1 = $_GET['val1'];

        $valor2 = $_GET['val2'];

        $resul = $valor1 + $valor2;

        echo $salida = '<div style="color:red" >'.$resul.'</div>';

    }

}

?>

Deja un comentario

Información básica sobre protección de datos Ver más

  • Responsable: Ingenio Hosting.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.