En este artículo, vamos a ver cómo podemos usar la función ajax() de jQuery para llamar a la función backend de forma asíncrona o, en otras palabras, requests HTTP. AJAX es un conjunto de técnicas de desarrollo web utilizadas por marcos y bibliotecas del lado del cliente para realizar llamadas HTTP asíncronas al servidor. AJAX significa » JavaScript asíncrono y X ML « .
En palabras más simples, puede usar Ajax para cargar datos desde el backend sin que la página se vuelva a cargar. También puede enviar datos al servidor en segundo plano, solicitar datos y recibir datos mientras la página ya se ha cargado. El uso de ajax brinda una mejor experiencia de usuario en la aplicación.
Sintaxis:
$.ajax(url); $.ajax(url,[options]);
La siguiente tabla enumera las opciones comúnmente utilizadas con la solicitud ajax.
| URL | Una string que contiene la URL a la que se envía la solicitud. |
| escribe | Un tipo de solicitud http, por ejemplo, POST, PUT y GET. El valor predeterminado es la solicitud GET. |
| tipo de contenido | Una string que contiene un tipo de contenido enviado al servidor. |
| tipo de datos | El tipo de datos que espera recibir del servidor, JSON, XML, etc. |
| éxito | Una función de devolución de llamada que se ejecutará cuando la solicitud de Ajax tenga éxito. |
| error | Una función de devolución de llamada que se ejecutará cuando la solicitud falle. |
| datos | Un dato para ser enviado al servidor. Puede ser un objeto JSON, una string o una array. |
Crear una solicitud AJAX GET simple
Antes de que podamos usar Ajax, necesitamos obtener jQuery en su aplicación. Para este artículo, usaremos el script Ajax jQuery disponible en línea como en el código a continuación. A los efectos de este artículo, consideraremos un archivo JSON donde enviaremos una solicitud ajax() y recuperaremos datos del archivo.
Consideremos que el archivo JSON llamado «data.json» está dentro de una carpeta llamada data que se encuentra en el directorio raíz o, en otras palabras, la carpeta donde se encuentra actualmente nuestro archivo html y tiene los datos como se muestra a continuación.
Nota: Recuerde que debe estar en localhost o en alguna ruta implementada para que funcionen las requests ajax; de lo contrario, obtendrá un error de CORS (intercambio de recursos de origen cruzado).
El archivo data.json:
[
{
"Name":"Aman Prakash Jha",
"Occupation": "Student"
},
{
"Name":"Sharan Swaroop",
"Occupation":"SDE-1"
},
{
"Name":"Chiraag Kakar",
"Occupation":"Sr. Software Engineer"
}
]
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!--Loading the script so that we can use Ajax-->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>
Default code has been
loaded into the Editor.
</p>
<button id="getData">GET</button>
<script>
$("#getData").click(function (event) {
event.preventDefault();
$.ajax({
url: "data/data.json",
type: "GET",
dataType: "json",
success: function (data) {
// This here will print the
// retrieved json on the console.
console.log(data);
},
error: function () {
console.log("Something went wrong");
},
});
});
</script>
</body>
</html>
Producción:
[
{
"Name":"Aman Prakash Jha",
"Occupation": "Student"
},
{
"Name":"Sharan Swaroop",
"Occupation":"SDE-1"
},
{
"Name":"Chiraag Kakar",
"Occupation":"Sr. Software Engineer"
}
]
Envío de una solicitud POST AJAX simple
Ahora avancemos e intentemos enviar una solicitud «POST» usando el método ajax().
Para este ejemplo, usaremos una función de python simple escrita en matraz-microframework que recibirá la solicitud POST de ajax() y simplemente devolverá los datos. Si desea saber más sobre el matraz, puede leer su documentación oficial aquí .
Python
from flask import Flask, redirect, render_template, request
app = Flask(__name__)
@app.route('/data/post_data/', methods = ["GET","POST"])
def post_data():
'''Function which is supposed to process the
POST request received from ajax'''
data = None
if request.method == "POST":
'''Stores the Json file that is posted by ajax.
This function simply returns the Json file
it receives.'''
data = request.get_json()
print(data)
return ({"status":200, "data":data})
return render_template("post.html")
if __name__ == '__main__':
app.run(debug=True)
Ejemplo: así es como puede configurar el HTML con ajax() para la solicitud «POST».
HTML
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>Default code has been loaded
into the Editor.</p>
<form method="POST">
<input type="text"
placeholder="Name" id="name">
<button id="btn">POST</button>
</form>
<script>
$("#btn").click(function(event){
event.preventDefault();
var name = $("#name").val();
$.ajax({
url:"/data/post_data/",
type:"POST",
contentType:"application/json",
dataType:"json",
data: JSON.stringify({
name: name,
occupation: "SDE"
}),
success: function(data) {
console.log(data)
},
error: function(data ){
console.log("Something went wrong");
}
});
});
</script>
</body>
</html>
Producción:
{
data: {name: "Aman Prakash Jha", occupation: "SDE"},
status:200
}
Publicación traducida automáticamente
Artículo escrito por amanjha7151 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA