Skip to content

Instantly share code, notes, and snippets.

@pochitax

pochitax/index-get.html

Created June 8, 2022 21:20
Show Gist options
  • Save pochitax/b55f17eae792fe4ff043c28ed295e6e6 to your computer and use it in GitHub Desktop.
Save pochitax/b55f17eae792fe4ff043c28ed295e6e6 to your computer and use it in GitHub Desktop.
Download ZIP
Ajax, get y post - respuesta de éxito y error
Raw
index-get.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- css bsb-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div id="ejemplo" class="row align-items-center vh-100">
<div class="col-md-6">
<h1>Contenido dinámico asíncrono</h1>
<a id="boton" class="btn btn-primary">Llenar párrafo</a>
</div>
<div class="col-md-6">
<div id="textoDinamico">
</div>
</div>
</div>
</div>
<!-- Jquery : AJAX NO FUNCIONA SI NO SE CARGA JQUERY -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<!-- script bsb -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
<!-- script personal -->
<script>
// función
$(document).ready( function(){
// generando la función al momento que se carga el archivo html
// ejemplo que carga un archivo html
$('#ejemplo').on('click', '#boton', function(){
$.get({
url: 'respuesta.html', // la url correcta es 'respuesta.html'
success: function(response){
$('#textoDinamico').html(response);
console.log('se muestra nuestro html');
},
error: function(){
$('#textoDinamico').html(
'<p>error</p>'
);
$('#textoDinamico').addClass('bg-danger');
$('#textoDinamico').addClass('text-light');
$('#textoDinamico').addClass('p-4');
console.log('no está cargando el html');
}
})
});
});
</script>
</body>
</html>
Raw
index-post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- css bsb-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div id="ejemplo" class="row align-items-center vh-100">
<div class="col-md-6">
<h1>Contenido dinámico asíncrono</h1>
<a id="boton" class="btn btn-primary">Llenar párrafo</a>
</div>
<div class="col-md-6">
<div id="textoDinamico">
</div>
</div>
</div>
</div>
<!-- Jquery : AJAX NO FUNCIONA SI NO SE CARGA JQUERY -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<!-- script bsb -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
<!-- script personal -->
<script>
// función
$(document).ready( function(){
// generando la función al momento que se carga el archivo html
// ejemplo que carga un archivo html
$('#ejemplo').on('click', '#boton', function(){
$.post({
url: 'respuesta-2.html', // la url correcta es 'respuesta.html'
success: function(response){
$('#textoDinamico').html(response);
console.log('se muestra nuestro html');
},
error: function(){
$('#textoDinamico').html(
'<p>error</p>'
);
$('#textoDinamico').addClass('bg-danger');
$('#textoDinamico').addClass('text-light');
$('#textoDinamico').addClass('p-4');
console.log('no está cargando el html');
}
})
});
});
</script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trabajo ajax</title>
<!-- Css Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<div class="container my-5">
<div class="row">
<div class="col-3 text-end">
<a href="#" id="botonAjax" class="btn btn-primary">Botón ajax</a>
</div>
<div class="col-9">
<div id="contenidoDinamico" class="border p-5">
</div>
</div>
</div>
</div>
<!-- Script Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<!-- Script Jquery -->
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<!-- Script Personalizado -->
<script>
// FUNCIÓN EN JQUERY QUE RECONOZCA QUE SE CARGÓ EL BODY
// onLoad
$(document).ready( function(){
// BOTON QUE SE ACTIVA AL CLICK
$('#botonAjax').click( function(){
// VAMOS A EJECUTAR LA FUNCIÓN TIPO AJAX
$.ajax({
url: 'seccion.html', // EL DATO PUEDE SER EXTRAIDO DE UN HTML, JSON O DE UN XML
type: 'get', // GET = LISTAR, LEER - POST = MODIFICAR, ENVIAR DATOS O ELIMINAR
dataType: 'html',
// ENVÍO DE RESPUESTA EXITOSO
success: function(response){ //ENVÍO UNA RESPUESTA
$('#contenidoDinamico').html(response + 'Yeiii hay una respuesta');
},
// ENVÍO DE RESPUESTA DE ERROR
error: function(){
$('#contenidoDinamico').text('No encontramos respuesta :(');
alert('No se encontraron respuestas asociadas');
}
});
});
});
</script>
</body>
</html>
Raw
respuesta.html
<div class="bg-dark text-light p-4">
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos sunt impedit accusantium officia nihil, non, quia nesciunt amet libero numquam aliquid cum iusto laborum facilis at dolorum odit asperiores repellat!
</p>
<ul>
<li>Listado 1</li>
<li>Listado 2</li>
<li>Listado 3</li>
</ul>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus ipsum accusantium incidunt consequuntur quia doloremque dolorum alias libero, laborum quo eos quisquam deleniti deserunt distinctio obcaecati dolore natus, exercitationem illo.</p>
<iframe width="100%" height="315" src="https://www.youtube.com/embed/RqQ1d1qEWlE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Raw
seccion.html
<h1>Hola chiquillos</h1>
<p>Estamos probando un llamado en ajax</p>
<p>Hay poquitos hoy, parece que se quedaron mimidos...</p>
<h5>:)</h5>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment