jQuery AJAX-Daten
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.
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