martes, 19 de febrero de 2013

El método ajax()

Para tener completo control en el envío y recepción de datos, podemos utilizar el método ajax(), el cual es más completo, pero al tener tantos parámetros (32 parámetros opcionales, algunos de los cuales ya están desactualizados) se recomienda mejor utilizar métodos como load(), post() o get(). Aqui se da un ejemplo de cómo utilizar los principales parámetros:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Val</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#popular").click(function(){
    onLeePoema("0")
    });
    $("#clasico").click(function(){
    onLeePoema("1")
    });
    $("#romantico").click(function(){
    onLeePoema("2")
    });
}
function onLeePoema(tipo){
    $.ajax({
        async:true,
        type:"POST",
        dataType:"html",
        contentType:"application/x-www-form-urlencoded",
        url:"poemaPOST.php",
        data:"poema="+tipo,
        beforeSend: inicioEnvio,
        success: llegadaEnvio,
        error: errorEnvio
    });
}
function inicioEnvio(){
    $("div").text("Inicio carga...");
}
function llegadaEnvio(datos){
    $("div").html(datos);
}   
function errorEnvio(datos){
    $("div").text("No se pudo, lo siento");
}
</script>
</head>
<body>
<button id="popular">Poema popular</button>
<button id="clasico">Poema clásico</button>
<button id="romantico">Poema romántico</button>
<div></div>
</body>
</html>


Curso completo: https://www.udemy.com/jquery-y-mobile/
Ejemplo: http://pacoarce.com/jQuery/ajax.html

No hay comentarios:

Publicar un comentario