Datos jQuery AJAX
Los datos AJAX son los datos enviados al servidor y utilizados por el servidor. Este tutorial demuestra cómo enviar datos al servidor usando AJAX en jQuery.
Datos jQuery AJAX
Los datos enviados al servidor mediante AJAX pueden ser un objeto JSON, una cadena o una matriz. Estos datos se utilizan además en la página del servidor para cualquier propósito.
Podemos enviar datos únicos o múltiples utilizando una matriz o un objeto JSON. Usamos la siguiente sintaxis para enviar múltiples campos de datos con la matriz.
data: {username: username, password: password}
Este método puede enviar múltiples campos de datos al servidor y podemos usarlos para otros procesos. En este caso, un objeto JSON es más conveniente donde podemos enviar todos los campos de datos en un objeto JSON serializado.
Probemos un ejemplo para enviar múltiples campos de datos usando un objeto JSON. Ver ejemplo:
index.html:
<!doctype html>
<html>
<head>
<title>jQuery Ajax Data</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<form id="Login_Form" method="post">
<div>
Enter the Username:
<input type="text" name="username" id="User_Name" />
Enter the Password:
<input type="password" name="password" id="Password" />
<input type="submit" name="loginBtn" id="Login_Button" value="Login" />
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#Login_Form').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: 'demo.php',
data: $(this).serialize(),
success: function(response) {
var JSON_Data = JSON.parse(response);
// user login check
if (JSON_Data.success == "1" && JSON_Data.username == "admin" && JSON_Data.password == "password" )
{
document.write('Login Success');
alert(response);
}
else
{
alert('Invalid User Name and Password!');
}
}
});
});
});
</script>
</body>
</html>
El código anterior envía los datos del formulario utilizando el método $.ajax y post al servidor, y el servidor utilizará los datos para iniciar sesión; los datos se envían en un objeto serializado utilizando la sintaxis data: $(this).serialize(),. Aquí está la página del servidor demo.php.
<?php
if (isset($_POST['username']) && $_POST['username'] && isset($_POST['password']) && $_POST['password']) {
//Here we can also perform authentication
echo json_encode(array('success' => 1, 'username' => $_POST['username'], 'password' => $_POST['password'] ));
} else {
echo json_encode(array('success' => 0));
}
?>
El código del servidor verifica si el nombre de usuario y la contraseña están configurados, luego crea un objeto JSON para enviarlo a AJAX. Autenticamos el inicio de sesión en jQuery en la página index.html.
Vea la salida del código en la animación a continuación.
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook