<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:
|
