HOWTO · jQuery
jQuery AJAX-Daten
Dieses Tutorial zeigt, wie Sie Daten in jQuery AJAX verwenden.
Auf dieser Seite
Die AJAX-Daten sind die Daten, die an den Server gesendet und vom Server verwendet werden. Dieses Tutorial zeigt, wie Sie Daten mit AJAX in jQuery an den Server senden.
jQuery AJAX-Daten
Die Daten, die mit AJAX an den Server gesendet werden, können ein JSON-Objekt, eine Zeichenfolge oder ein Array sein. Diese Daten werden auf der Serverseite für beliebige Zwecke weiterverwendet.
Wir können einzelne oder mehrere Daten mit einem Array oder JSON-Objekt senden. Wir verwenden die folgende Syntax, um mehrere Datenfelder mit dem Array zu senden.
data: {username: username, password: password}
Diese Methode kann mehrere Datenfelder an den Server senden, die wir für weitere Prozesse verwenden können. In diesem Fall ist ein JSON-Objekt bequemer, bei dem wir alle Datenfelder in einem serialisierten JSON-Objekt senden können.
Lassen Sie uns ein Beispiel ausprobieren, um mehrere Datenfelder mit einem JSON-Objekt zu senden. Siehe Beispiel:
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>
Der obige Code sendet die Formulardaten mit der Methode $.ajax und post an den Server, und der Server verwendet die Daten für Anmeldezwecke; Die Daten werden in einem serialisierten Objekt mit der Syntax data: $(this).serialize(), gesendet. Hier ist die Serverseite 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));
}
?>
Der Servercode prüft, ob der Benutzername und das Kennwort festgelegt sind, und erstellt dann ein JSON-Objekt, das an AJAX zurückgesendet wird. Wir haben den Login in jQuery auf der Seite index.html authentifiziert.
Sehen Sie sich die Ausgabe für den Code in der Animation unten an.
