 |
Metodos get() y post() en AJAX
Solicitud HTTP: GET vs POST
Dos métodos comúnmente utilizados para una petición-respuesta entre un cliente y el servidor son: GET y POST .
- GET - Pide a los datos de un recurso especificado. GET se utiliza básicamente para conseguir justo (recuperar) algunos datos del servidorNota:. El GET método puede devolver los datos almacenados en caché.
- POST - los datos adjunte a procesar a un recurso especificado POST también se puede utilizar para obtener algunos datos del servidor. Sin embargo, el POST método NUNCA almacena en caché de datos, y con frecuencia se utiliza para enviar datos junto con la solicitud.
Método $.get ()
El método $.get() solicita datos del servidor con una solicitud HTTP GET.
Sintaxis:
$.get(URL,callback);
El parámetro de URL requerido especifica la URL que desea solicitar. El parámetro de devolución de llamada opcional es el nombre de una función que se ejecutará si la solicitud tiene éxito.
El primer parámetro de $.get()es la URL que deseamos solicitar ("demo_test27.php"). El segundo parámetro es una función de devolución de llamada. El primer parámetro de devolución de llamada contiene el contenido de la página solicitada y el segundo parámetro de devolución de llamada contiene el estado de la solicitud.
El siguiente ejemplo utiliza el método $.get() para recuperar datos de un archivo en el servidor:
<!DOCTYPE html> <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("demo_test27.php", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<button>Envíe una solicitud HTTP GET a una página y obtenga el resultado</button>
</body>
</html>
$.post ()
El método $.post() solicita datos del servidor mediante una solicitud HTTP POST.Sintaxis:
$.post(URL,data,callback);
El parámetro de URL requerido especifica la URL que desea solicitar. El parámetro de datos opcional especifica algunos datos para enviar junto con la solicitud.
El parámetro de devolución de llamada opcional es el nombre de una función que se ejecutará si la solicitud tiene éxito.
El siguiente ejemplo usa el $.post()método para enviar algunos datos junto con la solicitud:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("demo_test_post27.php",
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<button>Envíe una solicitud HTTP POST a una página y obtenga el resultado</button>
</body>
</html>
Utilizamos estas funciones cuando no queremos inyectar directamente los datos a nuestra página, sino que queremos procesarlos y eventualmente agregarlos en distintas partes.
La sintaxis de la función $.get es distinta a la ya utilizada $, en este caso es una función global de la librería jQuery:
$.get([nombre de la página],[parámetros a enviarse por el método get],
[función que recibe los datos del servidor])
También podemos llamarla:
jQuery.get([nombre de la página],[parámetros a enviarse por el método get],
[función que recibe los datos del servidor])
La función $.post es idéntica a la función $.get, lo único que difiere es como el protocolo HTTP empaqueta los datos y los envía al servidor. Normalmente se utiliza la función $.post, ya que no está limitado la cantidad de datos que se pueden enviar al servidor.
Problema:Implementar una aplicación que calcule el cuadrado de un número que ingresamos por teclado. La operación se realiza en el servidor, le enviamos los datos mediante la función de jQuery $.get
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<meta charset="UTF-8">
</head>
<body>
<form action="pag27.php" method="post" id="formulario">
Ingrese nro:<input type="text" name="nro" id="nro" size="10"><br>
<input type="submit" value="Calcular el cuadrado" id="enviar">
<div id="resultados"></div>
</form>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="func27.js"></script>
</body>
</html>
func27.js
let x = $(document);
x.ready(inicializarEventos);
function inicializarEventos() {
let x = $("#enviar");
x.click(presionSubmit);
}
function presionSubmit() {
let v = $("#nro").val();
$.get("pagina1.php", { numero: v }, llegadaDatos);
return false;
}
function llegadaDatos(datos) {
alert(datos);
}
pag27.php
<?php $cuadrado=$_REQUEST['numero']*$_REQUEST['numero']; echo $cuadrado; ?>
Veamos el código JavaScript para comunicarse con el servidor:
Primero en la función inicializarEventos enlazamos el evento click al botón submit del formulario:
function inicializarEventos() {
let x = $("#enviar");
x.click(presionSubmit);
}
Cuando presionamos el botón extraemos el valor del control text mediante el método 'val()' y llamamos a la función $.get indicando el nombre de la página a llamar, un objeto literal con todos los parámetros y sus valores (en este caso solo tenemos un parámetro llamado numero) y finalmente el nombre de la función que se ejecutará cuando lleguen los datos del servidor:
function presionSubmit() {
let v = $("#nro").val();
$.get("pagina1.php", { numero: v }, llegadaDatos);
return false;
}
La función que se ejecuta cuando llegan los datos del servidor recibe un string:
function llegadaDatos(datos) {
alert(datos);
}