27 - $.get y $.post(Pasando datos al servidor por los métodos GET y POST)

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

pagina1.html

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
</head>

<body>
  <form action="pagina1.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="funciones.js"></script>
</body>

</html>

funciones.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);
}

pagina1.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);
}


Retornar