Ejemplo de Ajax usando jQuery

Este es una extensión del tutorial de Ajax usando Javascript, pero en esta ocasión será usando jQuery, el código es bastante más simple que con JavaScript, pero siempre se van a manejar las 2 funciones que mencioné en el otro tutorial, la que “inicia” el proceso y la que ejecuta una “acción” cuando recibe los datos

Aquí el código Ajax usando jQuery

<html>
<head>
<title>Ejemplo de manejo de Ajax usando jquery</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/JavaScript">
function consultar(valor)
{
    $("#resultado").html("Cargando..."); //Mostramos el mensaje de cargando
    $.get("meses.php",{num:valor},procesarEventos); //enviamos la solicitud usando el método get e indicando los parámetros :valor, y por ultimo la función que se ejecutará cuando lleguen los datos
}

function procesarEventos(datos)
{
  $("#resultado").html(datos); //cuando los datos lleguen lo mostramos dentro del control con el id resultado
}
</script>
</head>
<body>
    <input type="text" id="valor" name="valor"> <input type="button" value="Consultar" onclick="javascript: consultar(valor.value);">
<div id="resultado"></div>
</body>
</html>

como ven, el código es mucho más sencillo con jQuery, lo pueden verificar aqui: http://www.elcodigofuente.com/ejemplos/jquery_ajax.php y descargar el ejemplo como siempre

Archivos adjuntos
Tipo de Archivo: zip[download id=”985″]

Posted

in

by

Comments

2 respuestas a “Ejemplo de Ajax usando jQuery”

  1. JOWER Avatar
    JOWER

    Excelente trabajo hermano, gracias por brindar sus conocimientos a los que estamos aprendiendo.

  2. eCCe Avatar
    eCCe

    algo así pero con conexión a base de datos sería excelente

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *