Búsqueda personalizada
 
 
 
 
$.ajax
 

Hasta ahora hemos visto que jQuery nos provee varias formas de recuperar y enviar datos al servidor utilizando ajax:

Existe otra función llamada $.ajax que es la más completa de todas, pero como desventaja es más compleja su empleo.

La sintaxis de la función $.ajax es:

  ajax([objeto literal])  

Retorna un objeto XMLHttpRequest que podemos eventualmente utilizarlo.

Con un ejemplo veremos las propiedades principales que podemos configurar en el parámetro a enviar.

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 $.ajax

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>

fuciones.js

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

function inicializarEventos()
{
  var x;
  x=$("#enviar");
  x.click(presionSubmit);
}
function presionSubmit()
{
  var v=$("#nro").attr("value");
  $.ajax({
           async:true,
           type: "POST",
           dataType: "html",
           contentType: "application/x-www-form-urlencoded",
           url:"pagina1.php",
           data:"numero="+v,
           beforeSend:inicioEnvio,
           success:llegadaDatos,
           timeout:4000,
           error:problemas
         }); 
  return false;
}

function inicioEnvio()
{
  var x=$("#resultados");
  x.html('<img src="../cargando.gif">');
}

function llegadaDatos(datos)
{
  $("#resultados").text(datos);
}

function problemas()
{
  $("#resultados").text('Problemas en el servidor.');
}

pagina1.php

<?php
$cuadrado=$_REQUEST['numero']*$_REQUEST['numero'];
echo $cuadrado;
?>

Veamos que datos podemos enviarle a la función $.ajax:

 function presionSubmit()  {   
   var v=$("#nro").attr("value");    
   $.ajax({             
     async:true,             
     type: "POST",             
     dataType: "html",             
     contentType: "application/x-www-form-urlencoded",
     url:"pagina1.php",
     data:"numero="+v, 
     beforeSend:inicioEnvio,
     success:llegadaDatos,
     timeout:4000, 
     error:problemas   });     
   return false;  }  

Hemos inicializado las siguientes propiedades:

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion