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

<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</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>
</body>
</html>

funciones.js

var x;
x=$(document);
x.ready(inicializarEventos);

function inicializarEventos()
{
  var x;
  x=$("#enviar");
  x.click(presionSubmit);
}

function presionSubmit()
{
  var v=$("#nro").attr("value");
  $.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()
{
  var x;
  x=$("#enviar");
  x.click(presionSubmit);
}

Cuando presionamos el botón extraemos el valor del control text 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()
{
  var v=$("#nro").attr("value");
  $.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