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

2 Comentarios para “Ejemplo de Ajax usando jQuery”

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

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *