Javascript

Ejemplo de Ajax usando jQuery

Por

16 Abril, 2013

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: https://www.elcodigofuente.com/ejemplos/jquery_ajax.php y descargar el ejemplo como siempre

Archivos adjuntos