Données jQuery AJAX
Les données AJAX sont les données envoyées au serveur et utilisées par le serveur. Ce didacticiel montre comment envoyer des données au serveur à l’aide d’AJAX dans jQuery.
Données jQuery AJAX
Les données envoyées au serveur à l’aide d’AJAX peuvent être un objet, une chaîne ou un tableau JSON. Ces données sont ensuite utilisées sur la page du serveur à quelque fin que ce soit.
Nous pouvons envoyer des données uniques ou multiples à l’aide d’un tableau ou d’un objet JSON. Nous utilisons la syntaxe ci-dessous pour envoyer plusieurs champs de données avec le tableau.
data: {username: username, password: password}
Cette méthode peut envoyer plusieurs champs de données au serveur et nous pouvons les utiliser pour d’autres processus. Dans ce cas, un objet JSON est plus pratique car nous pouvons envoyer tous les champs de données dans un objet JSON sérialisé.
Essayons un exemple pour envoyer plusieurs champs de données à l’aide d’un objet JSON. Voir exemple :
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>
Le code ci-dessus envoie les données du formulaire en utilisant la méthode $.ajax et post au serveur, et le serveur utilisera les données à des fins de connexion ; les données sont envoyées dans un objet sérialisé en utilisant la syntaxe data: $(this).serialize(),. Voici la page du serveur 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));
}
?>
Le code du serveur vérifie si le nom d’utilisateur et le mot de passe sont définis, puis crée un objet JSON à renvoyer à AJAX. Nous avons authentifié le login dans jQuery sur la page index.html.
Voir la sortie du code dans l’animation ci-dessous.
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