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>';
}
}
?>