El método jQuery load() es un método AJAX simple pero muy poderoso. El método Load() en jQuery ayuda a cargar datos del servidor y devolverlos al elemento seleccionado sin cargar toda la página.
Sintaxis:
$(selector).load(URL, data, callback);
Parámetros: Este método acepta tres parámetros como se mencionó anteriormente y se describe a continuación:
- URL: se utiliza para especificar la URL que debe cargarse.
- datos: se utiliza para especificar un conjunto de pares de clave/valor de consulta para enviar junto con la solicitud.
- devolución de llamada: es el parámetro opcional que es el nombre de una función que se ejecutará después de llamar al método load().
Valor devuelto: este método devuelve los datos solicitados del servidor con la URL especificada.
Ejemplo:
El archivo geeks.txt almacenado en el servidor y se cargará después de hacer clic en el botón de clic. El contenido de geeks.txt es:
¡Hola GeeksforGeeks!
Programa 1:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div_content").load("gfg.txt");
});
});
</script>
<style>
body {
text-align: center;
}
.gfg {
font-size:40px;
font-weight: bold;
color: green;
}
.geeks {
font-size:17px;
color: black;
}
#div_content {
font-size: 40px;
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<div id="div_content">
<div class = "gfg">GeeksforGeeks</div>
<div class = "geeks">A computer science portal for geeks</div>
</div>
<button>Change Content</button>
</body>
</html>
Producción :
También hay una función de devolución de llamada adicional en el parámetro que se ejecutará cuando se complete el método load(). Esta función de devolución de llamada tiene tres parámetros diferentes:
- parámetro 1: contiene el resultado del contenido si la llamada al método tiene éxito.
- parámetro 2: Contiene el estado de la función de llamada.
- parámetro 3: Contiene el objeto XMLHttpRequest.
Programa 2:
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div_content").load("gfg.txt", function(response,
status, http){
if(status == "success")
alert("Content loaded successfully!");
if(status == "error")
alert("Error: " + http.status + ": "
+ http.statusText);
});
});
});
</script>
<style>
body {
text-align: center;
}
.gfg {
font-size:40px;
font-weight: bold;
color: green;
}
.geeks {
font-size:17px;
color: black;
}
#div_content {
font-size: 40px;
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<div id="div_content">
<div class = "gfg">GeeksforGeeks</div>
<div class = "geeks">A computer science portal for geeks</div>
</div>
<button>Change Content</button>
</body>
</html>
Salida:
la salida del código dado siguió un cuadro de alerta que aparecerá después de hacer clic en el botón y si el contenido se cargó correctamente, aparecerá el mensaje «¡Contenido cargado correctamente!» . De lo contrario, mostrará un mensaje de error.
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA