jQuery AJAX データ
AJAX データは、サーバーに送信され、サーバーによって使用されるデータです。このチュートリアルでは、jQuery で AJAX を使用してサーバーにデータを送信する方法を示します。
jQuery AJAX データ
AJAX を使用してサーバーに送信されるデータは、JSON オブジェクト、文字列、または配列にすることができます。このデータは、サーバーページでさらにあらゆる目的に使用されます。
配列または JSON オブジェクトを使用して、単一または複数のデータを送信できます。以下の構文を使用して、配列とともに複数のデータフィールドを送信します。
data: {username: username, password: password}
このメソッドは、複数のデータフィールドをサーバーに送信でき、それらを以降のプロセスに使用できます。この場合、シリアル化された JSON オブジェクトですべてのデータフィールドを送信できる JSON オブジェクトの方が便利です。
JSON オブジェクトを使用して複数のデータフィールドを送信する例を試してみましょう。例を参照してください：
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>
上記のコードは、$.ajax および post メソッドを使用してフォームデータをサーバーに送信し、サーバーはログイン目的でデータを使用します。データは、data: $(this).serialize(), 構文を使用してシリアル化されたオブジェクトで送信されます。これが 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));
}
?>
サーバーコードは、ユーザー名とパスワードが設定されているかどうかを確認し、AJAX に送り返す JSON オブジェクトを作成します。index.html ページの jQuery でログインを認証しました。
以下のアニメーションのコードの出力を参照してください。
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