Peticiones JQuery

peticiones Ajax con JQuery

La tecnología Ajax (Asynchronous JavaScript And XML) es un mecanismo o técnica de desarrollo basada en JavaScript que permite realizar peticiones asíncronas al servidor sin necesidad de recargar la página completa. JQuery contiene distintos métodos que facilitan el desarrollo de peticiones Ajax. A continuación se muestran ejemplos de los distintos métodos para realizar peticiones asíncronas al servidor con JQuery.

<!DOCTYPE HTML>
<html lang="es">
    <head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="js/ajax.js"></script>
	<style>
		h1{ text-align:center; }
		#datos{
			margin:auto;
			border:black 1px solid;
			width:500px;
			height:500px;
			overflow:scroll;
		}
	</style>
    </head>
	<body>
		<h1>JQuery - AJAX</h1>
		<div id="div"></div>
	</body>
</html>

LOAD

$(document).ready(function(){
	
	$("#div").load("//api.nasa.gov/planetary/apod?api_key=DEMO_KEY");
});

GET

$(document).ready(function(){
	
    $.get("//api.nasa.gov/planetary/apod?",{api_key: "DEMO_KEY",date:"2017-10-16"},function(response){	
        console.log(response);
        Object.keys(response).forEach(key => $("#div").append(key+":\n "+response[key]+"
"));      
    });
});

POST

<form action="//reqres.in/api/users" method="POST" id="formu">
	<input type="text" name="name" id="name">
	<input type="text" name="job" id="job">
	<input type="submit" value="Enviar">
</form>

$(document).ready(function(){
    var user = {
	//name: $("#name").val(),
	name: $("input[name='name']").val(),
	//job: $("#job").val()
	job: $("input[name='job'").val()
    }
	
    $("#formu").submit(function(e){
	e.preventDefault();
	$.post($(this).attr("action"),user,function(response){
	    $("#datos").append(response.name+"
"+response.job);
	    console.log(response);
        }).done(function(){
            alert("Usuario añadido correctamente");
        });
    });    
});

AJAX

<form action="//reqres.in/api/users" method="POST" id="formu">
    <input type="text" name="name" id="name">
    <input type="text" name="job" id="job">
    <input type="submit" value="Enviar">
</form>


$(document).ready(function(){

    var user = {
        //name: $("#name").val(),
        name: $("input[name='name']").val(),
        //job: $("#job").val()
        job: $("input[name='job'").val()
    }

    $("#formu").submit(function(event){
        event.preventDefault();
	$.ajax({
	    type:"POST",
	    //dataType: "json",
	    //contentType: "application/json",
	    url: $(this).attr("action"),
	    data:user,
	    beforeSend: function(){
			
	    console.log("Enviando usuario...");
	    },
            success: function(response){
	    console.log(response);
	    $("#datos").append(response.name+"
"+response.job);
	    },
	    error: function(){
		console.log("Ha ocurrido un error");
	    },
	    timeout:2000
	});
    });
});

Comentarios: 0