AJAX - Cargar contenido de varias paginas sin que recargue toda la página

 
Vista:
Imágen de perfil de Hugo
Val: 10
Ha aumentado su posición en 2 puestos en AJAX (en relación al último mes)
Gráfica de AJAX

Cargar contenido de varias paginas sin que recargue toda la página

Publicado por Hugo (5 intervenciones) el 04/12/2018 10:22:29
Buenos días, a ver si alguien me puede ayudar porque no se muy bien como hacerlo.
Estoy haciendo en Blogger una nueva web de una radio para un amigo, a partir de una plantilla, pero me gustaría que en un apartado que sería donde escuchar la radio, poner varias páginas en un menú, seria En Directo, Programación y A la Carta, y que se cargara el contenido de esas páginas sin necesidad de volver a cargar el resto de la web, por ejemplo para evitar que se cortara la emisión del player que vamos a poner.
Espero que sea el sitio adecuado para poner esto y que alguien me pueda ayudar.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de abzer0x
Val: 70
Plata
Ha mantenido su posición en AJAX (en relación al último mes)
Gráfica de AJAX

Cargar contenido de varias paginas sin que recargue toda la página

Publicado por abzer0x (16 intervenciones) el 04/12/2018 22:13:45
Hola, Hugo te dejo un pequeño ejemplo el cual puedes adaptarlo a tus necesidades.

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
 
<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
</head>
 
<body>
	<ul id="menu">
		<li><a href="#" data-url="endirecto.html">En Directo</a></li>
		<li><a href="#" data-url="programacion.html">Programción</a></li>
		<li><a href="#" data-url="alacarta.html">A la carta</a></li>
	</ul>
	<div id="container">
		<!-- Aquí ira el contenido a cargar por AJAX -->
	</div>
 
	<script>
		document.addEventListener("DOMContentLoaded", (e) => {
			const menu = document.getElementById("menu");
			menu.addEventListener("click", event => {
				const target = event.target;
				if (target.dataset) {
					// realizó la petición 
					fetch(target.dataset.url)
					.then(response => response.text())
					.then(html => {
						document.getElementById("container").innerHTML = html;
					})
					.catch(error => {
						console.log(error)
					})
				}
			})
		});
	</script>
</body>
 
</html>

programacion.html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
 
<head>
	<title>Programación</title>
	<meta charset="UTF-8" />
</head>
 
<body>
	<h1>Programación</h1>
</body>
 
</html>

endirecto.html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
 
<head>
	<title>En directo</title>
	<meta charset="UTF-8" />
</head>
 
<body>
	<h1>En directo</h1>
</body>
 
</html>

alacarta.html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
 
<head>
	<title>A la carta</title>
	<meta charset="UTF-8" />
</head>
 
<body>
	<h1>A la carta</h1>
</body>
 
</html>

Puedes probarlo aquí.

Nos comentas si es lo que buscabas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de Hugo
Val: 10
Ha aumentado su posición en 2 puestos en AJAX (en relación al último mes)
Gráfica de AJAX

Cargar contenido de varias paginas sin que recargue toda la página

Publicado por Hugo (5 intervenciones) el 05/12/2018 00:12:18
Muchas gracias, mañana lo pruebo y te digo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Hugo
Val: 10
Ha aumentado su posición en 2 puestos en AJAX (en relación al último mes)
Gráfica de AJAX

Cargar contenido de varias paginas sin que recargue toda la página

Publicado por Hugo (5 intervenciones) el 05/12/2018 20:35:13
Me ha funcionado, pero no, hay algunos fallos que no se si me podrias ayudar a pulir
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 150
Oro
Ha mantenido su posición en AJAX (en relación al último mes)
Gráfica de AJAX

Cargar contenido de varias paginas sin que recargue toda la página

Publicado por xve (222 intervenciones) el 06/12/2018 11:17:39
A que fallos te refieres Hugo?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Hugo
Val: 10
Ha aumentado su posición en 2 puestos en AJAX (en relación al último mes)
Gráfica de AJAX

Cargar contenido de varias paginas sin que recargue toda la página

Publicado por Hugo (5 intervenciones) el 06/12/2018 11:31:55
Escríbeme si quieres un correo y te cuento un poco más y te pongo como admin del blog de pruebas que tengo para que me ayudes si no te importa.
Mil gracias!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Hugo
Val: 10
Ha aumentado su posición en 2 puestos en AJAX (en relación al último mes)
Gráfica de AJAX

Cargar contenido de varias paginas sin que recargue toda la página

Publicado por Hugo (5 intervenciones) el 16/12/2018 01:27:01
Tras probar la respuesta que me dais, surge un problema, y es que me sale el footer de la página que sale insertada.
¿Como podría evitar que saliera ese footer?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar