Si eres un amante del desarrollo web, sin duda ya habrás oído hablar de la popular biblioteca jQuery y su capacidad para simplificar el trabajo de los desarrolladores. Dentro de las numerosas funciones que el framework ofrece, los métodos abreviados jQuery AJAX son un recurso esencial para hacer peticiones HTTP de forma sencilla y eficiente. En este artículo te explicaremos todo lo que necesitas saber sobre estos métodos abreviados AJAX de jQuery y cómo implementarlos en tus proyectos web. ¡No te lo pierdas!
En este artículo, cubriremos los métodos más básicos utilizados en jQuery cuando se trata de Ajax métodos relacionados.
Métodos Ajax
Los métodos enumerados en la siguiente tabla son métodos comunes de jQuery Ajax que requieren mucho menos código que Ajax estándar.
| Método | Descripción |
|---|---|
$.get() |
Carga datos usando una solicitud Ajax HTTP GET |
$.getScript() |
Ejecuta JavaScript usando una solicitud Ajax HTTP GET |
load() |
Carga y coloca el HTML devuelto en el elemento seleccionado |
$.post() |
Carga datos usando una solicitud Ajax HTTP POST |
Ejemplo HTML
Usaremos el siguiente código HTML para los ejemplos que se enumeran a continuación.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.itgeared.com/jquery-ajax-methods-tutorial/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// ... jQuery Code ...
});
</script>
</head>
<body>
<img id="img1" src="go.png" /> ;
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>método de carga ()
El load() El método carga datos del servidor y coloca el HTML devuelto en el elemento coincidente. Este es uno de los métodos más comunes utilizados. El load() El método también le permite recuperar una parte del contenido de la URL de destino.
Por ejemplo, cuando esta declaración, $('#result').load('ajax/test.html #container'); se ejecuta, recupera el contenido de ajax/test.htmlpero luego jQuery analiza el documento devuelto para encontrar el elemento con una ID de contenedor.
Este elemento, con su contenido, se inserta en el elemento con un ID de resultado, y el resto del documento recuperado se descarta.
Sintaxis
$(selector).load(url,data,callback);| Parámetro | Descripción |
|---|---|
url |
URL requerida para enviar la solicitud |
data |
Datos opcionales para enviar al servidor junto con la solicitud |
callback |
Función opcional para ejecutar después de que se complete el método |
$("#go").click(function () {
$("#div1").load('demo_jquery_ajax_load.txt');
});método get()
El get() método se utiliza para realizar una AJAX HTTP OBTENER pedido.
Sintaxis
$(selector).get(url,data,success(data,textStatus,jqXHR),dataType);| Parámetro | Descripción |
|---|---|
url |
URL requerida para enviar la solicitud |
data |
Datos opcionales para enviar al servidor junto con la solicitud |
success |
Función opcional para ejecutar si la solicitud tiene éxito (data, textStatus, jqXHR) |
dataType |
Opcional, especifica el tipo de datos esperado de la respuesta del servidor (“xml”, “html”, “texto”, “script”, “json”, “jsonp”) |
$("#go").click(function () {
$.get("demo_jquery_ajax_load.txt", function (result) {
$("#div1").html(result);
});
});método getScript()
El getScript() El método se usa para obtener y ejecutar un JavaScript usando un AJAX HTTP OBTENER pedido.
Sintaxis
$(selector).getScript(url,success(script, textStatus, jqXHR));| Parámetro | Descripción |
|---|---|
url |
URL requerida para enviar la solicitud |
success |
Función opcional para ejecutar si la solicitud tiene éxito (script, textStatus, jqXHR) |
$("#go").click(function () {
$.getScript("demo_jquery_ajax_getScript.js");
});método post()
El post() método se utiliza para realizar una PUBLICACIÓN HTTP AJAX pedido.
Sintaxis
$(selector).post(url,data,success(data,textStatus,jqXHR),dataType);| Parámetro | Descripción |
|---|---|
url |
URL requerida para enviar la solicitud |
data |
Datos opcionales para enviar al servidor junto con la solicitud |
success |
Función opcional para ejecutar si la solicitud tiene éxito (data, textStatus, jqXHR) |
dataType |
Opcional, especifica el tipo de datos que se espera de la respuesta del servidor (“xml”, “html”, “texto”, “script”, “json”) |
$("input").keyup(function () {
var txt = $("input").val();
$.post("jquery_ajax_gethint.aspx", { strinput: txt }, function (data) {
$("span").html(data);
});
});