Frasco Ajax
Aprenderemos, con esta explicación, cómo enviar un formulario AJAX con la ayuda de jQuery y Flask, donde jQuery maneja la parte AJAX y Flask acepta la solicitud AJAX.
Envíe un formulario AJAX con la ayuda de jQuery y Flask
Ahora, crearemos un archivo app.py y comenzaremos a escribir el código. Entonces, lo primero que queremos manejar es el lado del servidor.
Ahora, agregaremos una ruta llamada post-data que tomará los datos que han pasado de la solicitud de AJAX, y solo aceptaremos solicitudes de publicación. Definiremos una función llamada Post_DATA(), y dentro de esta función necesitaremos obtener los datos que serán pasados desde el formulario.
Por lo general, un AJAX tendrá la forma de un diccionario y el objeto de solicitud.
Crearemos el primer objeto llamado Employee_Email y almacenaremos request.form['Employee_Email'], lo que significa que estamos buscando datos del campo del formulario. Ahora, haremos lo mismo con otro objeto llamado Employee_Name.
Employee_Email = request.form["Employee_Email"]
Employee_Name = request.form["name"]
Ahora, procesaremos estos datos, y si existen tanto Employee_Email como Employee_Name, crearemos un New_EMP_Name. Lo que vamos a hacer es invertir el Employee_Name usando Employee_Name[::-1].
Ahora, devolveremos un objeto JSON que es New_EMP_Name utilizando la función jsonify(), y si el bloque no se ejecuta, devolveremos un objeto JSON con la clave error y su valor.
if Employee_Name and Employee_Email:
New_EMP_Name = Employee_Name[::-1]
return jsonify({"Employee_Name": New_EMP_Name})
return jsonify({"error": "Missing some data!"})
Cuando se envíe este formulario, necesitaremos el evento para enviarlo; por eso lo manejaremos desde jQuery.
Generalmente, en HTML, si tiene un formulario y presiona enviar, intentará publicar los datos por sí mismo. Es una función HTML integrada; no necesita JavaScript para enviar un formulario.
Como estamos usando jQuery para enviar los datos, necesitaremos un evento. El evento es el parámetro en la función anónima, y luego se colocará event.preventDefault() en el último para evitar que el formulario envíe los datos dos veces.
$(document).ready(function() {
$('form').on('submit', function(event) {
event.preventDefault();
});
});
Dentro de la función, necesitamos llamar a ajax usando el signo de dólar y construir los argumentos; los datos contendrán dos objetos, Employee_Email y Employee_Name. Activaremos los datos por la identificación de entrada correspondiente.
Ahora, debemos especificar el tipo de solicitud, y debe ser una POST porque, en nuestro código Flask, solo aceptamos solicitudes de publicación, y luego la URL será la ruta que es /post-data.
$.ajax({
data:
{Employee_Name: $('#input_n').val(), Employee_Email: $('#input_e').val()},
type: 'POST',
url: '/post-data'
})
Ahora, crearemos una función done, y dentro de esta función, crearemos una declaración if-else para verificar y ver si ocurre el error o no. Estamos accediendo a la identificación del cuadro de alerta desde el archivo HTML, y cuando ocurre un error, esto seleccionará la alerta para el mensaje de error y luego ocultará la alerta correcta.
Si la condición if no es verdadera, vamos al bloque else, hacemos exactamente lo contrario, completamos la alerta de éxito con los datos de texto de este objeto JSON y luego queremos ocultar la alerta de error.
.done(function(data) {
if (data.error) {
$('#errorAlert').text(data.error).show();
$('#successAlert').hide();
} else {
$('#successAlert').text(data.Employee_Name).show();
$('#errorAlert').hide();
}
Ahora, ejecutemos la aplicación Flask y naveguemos por la ruta de la aplicación. Dentro del formulario, proporcionaremos un correo electrónico, luego un nombre y, después de enviarlo, podemos ver que devuelve el nombre en orden inverso sin recargar la página.
Código Python completo:
from flask import Flask, request, jsonify, render_template
app = Flask(__name__)
@app.route("/")
def Main_Page():
return render_template("index.html")
@app.route("/post-data", methods=["POST"])
def Post_DATA():
Employee_Email = request.form["Employee_Email"]
Employee_Name = request.form["Employee_Name"]
if Employee_Name and Employee_Email:
New_EMP_Name = Employee_Name[::-1]
return jsonify({"Employee_Name": New_EMP_Name})
return jsonify({"error": "Missing some data!"})
if __name__ == "__main__":
app.run(debug=True)
Código JavaScript completo:
$(document).ready(function() {
$('form').on('submit', function(event) {
$.ajax({
data: {
Employee_Name: $('#input_n').val(),
Employee_Email: $('#input_e').val()
},
type: 'POST',
url: '/post-data'
}).done(function(data) {
if (data.error) {
$('#errorAlert').text(data.error).show();
$('#successAlert').hide();
} else {
$('#successAlert').text(data.Employee_Name).show();
$('#errorAlert').hide();
}
});
event.preventDefault();
});
});
Código HTML completo:
<!DOCTYPE html>
<html>
<head>
<title>Flask Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='index.js') }}"></script>
</head>
<body>
<div class="container">
<br><br><br><br>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="input_e">Email address</label>
<input type="email" class="form-control" id="input_e" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="input_n">Name</label>
<input type="text" class="form-control" id="input_n" placeholder="First Name">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<br>
<div id="successAlert" class="alert alert-success" role="alert" style="display:none;"></div>
<div id="errorAlert" class="alert alert-danger" role="alert" style="display:none;"></div>
</div>
</body>
</html>
Hello! I am Salman Bin Mehmood(Baum), a software developer and I help organizations, address complex problems. My expertise lies within back-end, data science and machine learning. I am a lifelong learner, currently working on metaverse, and enrolled in a course building an AI application with python. I love solving problems and developing bug-free software for people. I write content related to python and hot Technologies.
LinkedIn